javascript - 根据用户选择输入隐藏/显示复选框

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>