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

问题描述

我有一个下拉框，当从下拉列表中选择时，它会显示数据.此外，我在每个 td 上方都有一个复选框，用于隐藏由 java 脚本执行的列，如果用户选中该复选框并在下拉框中选择另一个值，则所选复选框将不会显示.

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

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

Below is the code for hiding the column when checkbox selected

我想测试用户是否选中了复选框并在下拉框中选择了另一个值，然后所选的复选框将不会显示任何一个我怎么能这样?

I want to test if the user checked the checkbox and he select the another value in the drop-down box then the selected checkbox will not show can any one How can I that?

<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'));
});

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