

●目標  
現状では、チェックボックスの状態がリロード後は、リセットさせるようになってます。  
こちらをリセットされず、リロード前にチェックされている状態をリロード後もそのまま保持できるようにしたいです。

●試したこと  
cookieに保存する等の方法があるそうですが、できることであれば、JavaScript、phpのコードを書くことによって、保持できるようにしたいです。

[code]

    document.getElementById('button').addEventListener('click', () => {
      let targets = document.querySelectorAll(`input[type='checkbox'][name='check']`);
      for (const i of targets) {
        i.checked = false;
      }
    });
[/code]

[code]

    body {
      font-family: helvetica arial, "BIZ UDPGothic", sans-serif;
    }
    
    h1 {
      color: white;
      background-color: deeppink;
      text-align: center;
      padding: 20px 10px;
      margin: 0 100px;
      font-size: 30px;
    }
    
    
    /*  @media screen and (max-width:768px) {
            h1{
        color: white;
        background-color: deeppink;
        text-align: center;
        padding: 20px 10px;
        margin: 0 100px;
        font-size: 30px;
            }
        }  */
    
    ul {
      list-style: none;
      margin-left: 100px;
    }
    
    li {
      padding-bottom: 10px;
    }
    
    input[type=checkbox]:checked+label.strikethrough {
      text-decoration: line-through;
      color: #ccc;
    }
    
    .btn {
      font-size: 20px;
      color: white;
      background: #239b76;
      width: 250px;
      padding: 20px;
      border: none;
      border-radius: 10px;
      display: block;
      margin: 0 auto;
      opacity: 1;
      cursor: pointer;
    }
    
    .btn:hover {
      opacity: 0.8;
    }
    
    </style>
[/code]

[code]

    <h1>チェックリスト</h1>
    <ul>
      <li>
        <input type="checkbox" name="check" value="1">
        <label class="strikethrough">A</label>
      </li>
    
      <li>
        <input type="checkbox" name="check" value="1">
        <label class="strikethrough">B</label>
      </li>
    
      <li>
        <input type="checkbox" name="check" value="1">
        <label class="strikethrough">C</label>
      </li>
    
      <li>
        <input type="checkbox" name="check" value="1">
        <label class="strikethrough">D</label>
      </li>
    
    </ul>
    
    
    <input type="button" id="button" class="btn" value="全てのチェックを外す">
[/code]

[![チェックボックスのページ](https://i.stack.imgur.com/ySHmD.png)](https://i.stack.imgur.com/ySHmD.png)


CC BY-SA 4.0
2022-01-26T03:30:29.340
85937
2022-01-26T03:38:01.647
2022-01-26T03:38:01.647
32986
51090
question
javascript php
チェックボックスの値をリロード後も維持したい