[英]localStorage - Retrieve Checkbox Values
I'm working with a form (made with Bootstrap 4) and localStorage. 我正在使用表单(由Bootstrap 4制成)和localStorage。 I'm using it so i can use the form input values on another page.
我正在使用它,因此可以在另一页上使用表单输入值。 It works fine with the inputs, but in this form i also have checkboxes and i can't find how to do the following : i'd like to check which checkboxes are checked.
它可以很好地与输入配合使用,但是在这种形式下,我也有复选框,我无法找到以下方法:我想检查选中了哪些复选框。 For those that are checked, i'd like to add the checkbox label text in the localStorage to use it on my other page.
对于那些已选中的项目,我想在localStorage中添加复选框标签文本,以在其他页面上使用它。 How can i achieve this?
我怎样才能做到这一点?
My html looks like this : 我的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>
For the input, i use the following javascript : 对于输入,我使用以下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";
};
Here is the working DEMO of how to do what you need. 这是如何做您需要的工作演示 。
You need to use the checked
property for checkboxes: 您需要将
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 new code that saves data values instead of true/false
: DEMO . 保存数据值而不是
true/false
UPD新代码: DEMO 。
You could also do it the following way (pretty much the same, but a bit more compact): 您也可以按照以下方式进行操作(大致相同,但更为紧凑):
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";
}
I convert the HTMLCollection I get from the .getElementsByClassName(...)
function to an array, which I can iterate over using .forEach()
. 我将从
.getElementsByClassName(...)
函数获得的HTMLCollection转换为数组,可以使用.forEach()
进行迭代。 If you want to store the values by their ids, this works fine :P 如果您想通过其ID存储值,则可以使用:P
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.