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>

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>

• javascript
• php
• jquery
• html
• checkbox

• Put the state of the checkbox in a cookie, and use it to initialize the checkbox when the page loads. – Barmar Commented Mar 2, 2014 at 8:07
• 1 possible duplicate of keep checkboxes checked after page refresh – Barmar Commented Mar 2, 2014 at 8:07
• 1 @Barmar Why on the earth people still want to use cookie for these things. I think we should start using localStorage. – Rahil Wazir Commented Mar 2, 2014 at 8:21

1 Answer 1

Use localStorage for it.

Here is JSFiddle Example of it. Link

Code behind it:

HTML Code:

<input type="checkbox">

JS Code:

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