如何保持复选框在刷新页面后选中

问题描述

我有一个下拉框，当从下拉菜单中选择时，它显示数据也有我在每个td上面的复选框，此复选框用于隐藏由java脚本执行的列，如果用户检查检查并且他在下拉框中选择另一个值，则不会显示所选复选框。

I have a drop down box when selecting from the drop down its shows the data also i have check box above the each td ,this check box is used to hide the column this perform by java script,if the user check the check box and he select the another value in the drop down box then the selected check box will not show,

是当选中复选框时隐藏列的代码

below is the code for hiding the column when check box selected

我想如果用户选中复选框，并且他在下拉框中选择另一个值，那么选中的复选框将不会显示任何一个如何做

i want if the user check the check box and he select the another value in the drop down box then the selected check box will not show can any one how to do it

<input type='checkbox' style='margin:-19px 0 0 732px;   border: 1px solid grey;' name='9xx'/>9xx
<input type='checkbox' style='margin:-19px 0 0 36px;   border: 1px solid grey;' name='6xx'/>6xx
<input type='checkbox' style='margin:-19px 0 0 30px;   border: 1px solid grey;' name='12xx'/>12xx
<input type='checkbox' style='margin:-19px 0 0 21px;   border: 1px solid grey;' name='14xx'/>14xx
<input type='checkbox' style='margin:-19px 0 0 26px;   border: 1px solid grey;' name='10xx'/>10xx
<input type='checkbox' style='margin:-19px 0 0 31px;  border: 1px solid grey;' name='8xx'/>8xx
<input type='checkbox' style='margin:-19px 0 0 31px;  border: 1px solid grey;' name='11xx'/>11xx

<script>
$("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).show();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});

</script>

推荐答案

使用 localStorage 。

这里是JSFiddle的例子。

Here is JSFiddle Example of it.Link

后面的代码：

HTML代码：

<input type="checkbox">

JS代码：

$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('input').prop('checked', test || false);
});

$('input').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));
});

这篇关于如何保持复选框在刷新页面后选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！