Question

我有几个复选框作为div可用性的决定因素。

当我添加jQuery时它起作用但是，问题是当我单击chk1并取消选中它时，我希望第三个p仍然出现，因为第三个p包含类sb2。有什么建议我应该改变吗？

$('.sb').hide();
var first = true;

$('input[type="checkbox"][name^=chk]').change(function() {
  var $target = $('.sb' + this.id.replace('chk', '')).toggle(this.checked);
  if (first) {
    $('p[class^=sb]').not($target).hide();
    first = false;
  }
}).change()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="sb sb1">Checkbox content one</p>
<p class="sb sb2">Checkbox content two</p>
<p class="sb sb1 sb2">Checkbox content one & two</p>
<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="" checked>checkme2

Answer 1

只需触发

$('.sb').hide();
var first = true;

$('input[type="checkbox"][name^=chk]').change(function() {
  var $target = $('.sb' + this.id.replace('chk', '')).toggle(this.checked);
  if (first) {
    $('p[class^=sb]').not($target).hide();
    first = false;
  }
}).change()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="sb sb1">Checkbox content one</p>
<p class="sb sb2">Checkbox content two</p>
<p class="">Checkbox content one & two</p>
<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="" checked>checkme2

隐藏和显示带有多个复选框的多个div

1 个答案: