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

看看这个解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Fiddle Example

这将隐藏所有点击的项目，但会隐藏您点击的元素。并且在取消选中时显示元素。

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

3 个答案: