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

和第二个复选框上类似的东西。