Question

我想隐藏复选框项目，在用户点击按钮后，应隐藏所有选中的复选框。如果未选中该复选框，则保持项目可见。此外，我想尝试另一个按钮，使所有隐藏的复选框再次可见。这是我到目前为止所做的。

<button id="hide">Hide</button>
<button id="show">Show</button>
<div id="Tester">
  <input type="checkbox" name="Test1"> Test1<br>
  <input type="checkbox" name="Test2"> Test2<br>
</div>


$(document).ready(function(){
$("#hide").click(function(){
    if($("div").prop("checked"))
    {
        $("div").hide()
    }
});
$("#show").click(function(){
    $("div").show();
    });
});

Answer 1

您可以使用.each()。

使用 .each（），您可以遍历所有元素$("div").each()，类$(".red" ).each()或ids $("#name").each()，然后验证是否已选中并隐藏它（由于文本未附加到复选框，我将文本和复选框放在div中，并隐藏div - 使用.parent()访问父div）

*请记住，这将迭代所有输入元素，但您也可以在循环内验证

function hide_cb(){
    $( "input" ).each(function() {
      if ($( this ).prop('checked') ){
        $( this ).parent().hide();
        }
    });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="vehicle" value="Bike">item 2
</div>
<div>
<input type="checkbox" name="vehicle" value="Car">Item 1
</div>

<button onclick="hide_cb();">hide</button>

Answer 2

您需要包装复选框及其标签。我已经贴上了标签。你走了：

<button id="hide">Hide</button>
<button id="show">Show</button>
<div id="Tester">
    <label>
        <input type="checkbox" name="Test1"> Test1<br>
    </label>
    <label>
        <input type="checkbox" name="Test2"> Test2<br>
    </label>
</div>
<script type="text/javascript">

$(document).ready(function(){
  $("#hide").click(function(){
      $("#Tester input:checked").each(function(){  $(this).parent('label').hide() })
  });
  $("#show").click(function(){
    $("#Tester label").show()
  });
});

</script>

选中时隐藏复选框项，否则保持可见

2 个答案: