隐藏/显示基于用户选择输入的复选框

Question

坚持试图解决这个问题..我只想拥有一个带有复选框的静态HTML表单。 然后用户点击页面然后可以通过复选框选择，选中的复选框或复选框保留在页面上，然后选择未选中的复选框或隐藏。

以下是我尝试过的最新逻辑：

（2个复选框的简化版，但注意会有10个）

$('#cbxShowHide').click(function(){
    this.checked?$('#div1').show(1000);
    $('#div2').hide(1000);
});

$('#cbxShowHide2').click(function(){
    this.checked?$('#div2').show(1000);
    $('#div1').hide(1000);
});

的jsfiddle

HTML：

<div class="div1">
<input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label>
</div>

<div class="div2">
<input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label>
</div>

Answer 1

看看这个解决方案

 $("button").on("click", function() { $("input[type=checkbox]:not(:checked)").parent().hide(); }) 

 #block{display:none;background:#eef;padding:10px;text-align:center;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label> </div> <div class="div2"> <input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label> </div> <button> Hide Checkboxes </button> 

Answer 2

尝试使用：

if ( $(this).is(':checked') ){
    $('.div1').show(1000);
    $('.div2').hide(1000);
}

注意： $('.div1')而不是$('#div1')因为你使用的是没有id的类。

希望这可以帮助。

---

 $('#cbxShowHide').click(function(){ if ( $(this).is(':checked') ){ $('.div1').show(); $('.div2').hide(); }else{ $('.div2').show(); } }); $('#cbxShowHide2').click(function(){ if ( $(this).is(':checked') ){ $('.div2').show(); $('.div1').hide(); }else{ $('.div1').show(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1"> <input type="checkbox" id="cbxShowHide"/><label for="cbxShowHide">Show/Hide</label> <br> div1 content <br> </div> <hr/> <div class="div2"> <input type="checkbox" id="cbxShowHide2"/><label for="cbxShowHide2">Show/Hide</label> <br> div2 content <br> </div> 

Answer 3

您需要做的就是让两个项目都是类， .div和.cbxShowHide ，然后执行：

$('.cbxShowHide').change(function(){
    $('.div').show(1000);
    if(this.checked) 
        $('.div').not($(this).parent()).hide(1000);
});

小提琴示例

这将隐藏所有单击的项目，但会隐藏您单击的元素。 并在取消检查时显示元素。