Question

我正在使用表单（由Bootstrap 4制作）和localStorage。我正在使用它，因此可以在另一页上使用表单输入值。它可以很好地与输入配合使用，但是在这种形式下，我也有复选框，我无法找到以下方法：我想检查选中了哪些复选框。对于那些已选中的项目，我想在localStorage中添加复选框标签文本，以在其他页面上使用它。我该如何实现？

我的html看起来像这样：

 <form role="form" id="form" data-toggle="validator">

    <div class="form-row">
      <div class="form-group col-md-12">
        <label for="inputAdresse">Adresse *</label>
        <input type="text" class="form-control places-autocomplete" name="inputAdresse" id="inputAdresse"
          required="required" placeholder="" value="" autocomplete=" address-line1" />
      </div>
    </div>

    <div class="form-row form-checks">
        <div class="form-group col-md-12 col-sm-6">
            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkAscenseur" name="check" value="Ascenseur">
            <label class="custom-control-label" for="checkAscenseur">Ascenseur</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkCave" name="check" value="Cave">
            <label class="custom-control-label" for="checkCave">Cave</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkParking" name="check" value="Parking">
            <label class="custom-control-label" for="checkParking">Parking</label>
            </div>
        </div>
    </div>
    <button class="nextBtn pull-right" type="submit" id="btn-submit">Submit</button>
</form>

对于输入，我使用以下javascript：

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  window.location.href = "thank-you.html";
};

Answer 1

这是DEMO的工作方式，可帮助您完成所需的工作。

您需要将checked属性用于复选框：

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);
  
  let checkAscenseur = document.getElementById('checkAscenseur');
  localStorage.setItem('checkAscenseur', checkAscenseur.checked);
  
  let checkCave = document.getElementById('checkCave');
  localStorage.setItem('checkCave', checkCave.checked);
  
  let checkParking = document.getElementById('checkParking');
  localStorage.setItem('checkParking', checkParking.checked);

  window.location.href = "thank-you.html";
};

UPD 新代码可保存数据值，而不是true/false：DEMO。

Answer 2

您也可以按照以下方式进行操作（大致相同，但更紧凑）：

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  new Array(...document.getElementById('form').getElementsByClassName('custom-control-input')).forEach(cb => {
    localStorage.setItem(cb.id, cb.checked);
  }

  window.location.href = "thank-you.html";
}

我将从.getElementsByClassName(...)函数获得的HTMLCollection转换为数组，可以使用.forEach()进行迭代。如果您想按其ID存储值，则可以使用：P

localStorage-检索复选框值

2 个答案: