jQuery複選框隱藏並顯示div

Question

我有問題，這項工作和一切正常，但複選框不太好 如果我標記checkbox1後重新加載它的標記checkbox2和checkbox1。我必須幫助找到這個工作。

只保存複選框標記

$(function(){   
    $('#checkbox1') 
    .prop('checked', localStorage.input === 'true') 
    .on('change', function() { 
     localStorage.input = this.checked; 
     if (this.checked) { 
     $('.column_category').show(0); //checked 
     } else { 
     $('.column_category').hide(0); 
     } 
    }) 
    .trigger('change'); 
}); 

$(function(){   
    $('#checkbox2') 
    .prop('checked', localStorage.input === 'true') 
    .on('change', function() { 
     localStorage.input = this.checked; 
     if (this.checked) { 
     $('.column_sku').show(0); //checked 
     } else { 
     $('.column_sku').hide(0); 
     } 
    }) 
    .trigger('change'); 
}); 


<input type="checkbox" id="checkbox1"/><label for="cbxShowHide">Categories</label> 
<input type="checkbox" id="checkbox2"/><label for="cbxShowHide">SKU</label> 
<input type="checkbox" id="checkbox3"/><label for="cbxShowHide">UPC</label> 

Answer 1

在這裏，你去了一個解決方案https://jsfiddle.net/441s41mt/1/

$('input[type="checkbox"]').each(function(){ 
 
    $(this).prop('checked', (localStorage.getItem($(this).attr('id')) === 'true') ? 'checked' : '') 
 
}); 
 

 
$('input[type="checkbox"]') 
 
    .on('change', function() { 
 
    localStorage.setItem($(this).attr('id'), this.checked); 
 
    if (this.checked) { 
 
     $('.' + $(this).data('target')).show(); 
 
    } else { 
 
     $('.' + $(this).data('target')).hide(); 
 
    } 
 
    }) 
 
    .trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="checkbox1" data-target="column_category"/><label for="cbxShowHide">Categories</label> 
 
<input type="checkbox" id="checkbox2" data-target="column_sku"/><label for="cbxShowHide">SKU</label> 
 
<input type="checkbox" id="checkbox3"/><label for="cbxShowHide">UPC</label>

的第一件事情，請參考jsfiddle作爲localStorage將尼特工作的stackoverflow片段。

在checkbox中使用data-target來引用類。

希望這會幫助你。

Answer 2

我想這是因爲你綁定checkbox1和checkbox2到localStorage相同input領域。也許這可以幫助：

$('#checkbox1') 
    .prop('checked', localStorage.check1State=== 'true') 
    .on('change', function() { 
    localStorage.check1State = this.checked; 
    if (this.checked) { 
     $('.column_category').show(0); //checked 
    } else { 
     $('.column_category').hide(0); 
    } 
    }) 
    .trigger('change'); 
}); 

和第二個複選框上類似的東西。