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

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>

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

Hide checkbox item when it is checked, otherwise keep it visable

html

checkbox

jquery