当重新访问同一页面时记住复选框的值 [英] Remember check box value when re-visited the same page
问题描述
我的页面中有3个复选框。 FIDDLE
<形式>
< input type =checkboxname =vehiclevalue =Bike>我有一辆自行车< br>
< input type =checkboxname =vehiclevalue =Car>我有一辆车< br>
< input type =checkboxname =vehiclevalue =Scooter>我有一辆滑板车< br>
< input type =submitvalue =提交>
< / form>
当用户点击提交时，它将导航到另一个页面。当我再次访问同一页面时，我希望看到之前选择的值。我该如何使用Javascript？
您需要使用cookie（或其他持久存储）来存储值任何被检查。
使用cookie，您可以通过将事件监听器附加到复选框来完成此操作，以便在更新（选择/取消选定）Cookie时存储（或更新）包含其当前值。
当页面初始加载时，您将检查cookie的存在并相应地填充框。
以下是您可以这样做的一种方法。这使用 jQuery cookie库。
<！DOCTYPE HTML>
< html>
< head>
< meta charset =utf-8>
< title>坚持复选框< / title>
< / head>
< body>
< div>
< label for =checkAll>全部检查< / label>
< input type =checkboxid =checkAll>
< / div>
< div>
< label for =option1>选项1< / label>
< input type =checkboxid =option1>
< / div>
< div>
< label for =option2>选项2< / label>
< input type =checkboxid =option2>
< / div>
< div>
< label for =option3>选项3< / label>
< input type =checkboxid =option3>
< / div>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>< / script>
< script src =http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js>< / script>
< script> $（$'$'$'$'$'$'$'$'$'$'$'$'$'$'$''。
}）; （）：
$ b $（：checkbox）。on（change，function（）{
var checkboxValues = {};
$（：checkbox）。each函数（）{
checkboxValues [this.id] = this.checked;
}）;
$ .cookie（'checkboxValues'，checkboxValues，{expires：7，path：'/' }）
}）;
函数repopulateCheckboxes（）{
var checkboxValues = $ .cookie（'checkboxValues'）;
if（checkboxValues）{
Object.keys（checkboxValues）.forEach（function（element）{
var checked = checkboxValues [element];
$（＃+ element ）.prop（'checked'，checked）;
}）;
}
}
$ .cookie.json = true;
repopulateCheckboxes（）;
< / script>
< / body>
< / html>
I have 3 check boxes in my page. FIDDLE
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car <br>
<input type="checkbox" name="vehicle" value="Scooter">I have a Scooter <br>
<input type="submit" value=" Submit ">
</form>
When the user clicks on "Submit", it navigates to another page. When I visit the same page again, I want to see the values which I previously selected. How can I do that using Javascript?
You need to use a cookie (or some other persistent storage) to store the values of whatever is checked.
With a cookie, you can do this by attaching event listeners to the checkboxes, so that when they are updated (selected/deselected) a cookie is stored (or updated) containing their current values.
When the page initially loads, you will then check for the presence of the cookie and populate the boxes accordingly.
Here's one way you might do it. This uses the jQuery cookie library.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Persist checkboxes</title>
</head>
<body>
<div>
<label for="checkAll">Check all</label>
<input type="checkbox" id="checkAll">
</div>
<div>
<label for="option1">Option 1</label>
<input type="checkbox" id="option1">
</div>
<div>
<label for="option2">Option 2</label>
<input type="checkbox" id="option2">
</div>
<div>
<label for="option3">Option 3</label>
<input type="checkbox" id="option3">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
<script>
$("#checkAll").on("change", function() {
$(':checkbox').not(this).prop('checked', this.checked);
});
$(":checkbox").on("change", function(){
var checkboxValues = {};
$(":checkbox").each(function(){
checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })
});
function repopulateCheckboxes(){
var checkboxValues = $.cookie('checkboxValues');
if(checkboxValues){
Object.keys(checkboxValues).forEach(function(element) {
var checked = checkboxValues[element];
$("#" + element).prop('checked', checked);
});
}
}
$.cookie.json = true;
repopulateCheckboxes();
</script>
</body>
</html>
这篇关于当重新访问同一页面时记住复选框的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
