Question

我已经选中了该复选框，如果未选中，则显示div元素。

所以我尝试了

$('.switch-info').click(function(){
    this.checked?$('.txt-switch-info').hide():$('.txt-switch-info').show();  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="switch1">
  <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
</label>
<span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

这很好。

但是当我多次使用此复选框时，显示的DIV不能正常工作。像这样

<label for="switch1">
      <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
    </label>
    <span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

<label for="switch2">
      <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch2" value="" class="switch-info" checked>
    </label>
    <span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

<label for="switch3">
      <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch3" value="" class="switch-info" checked>
    </label>
    <span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

我该如何解决代码？请帮忙。

Answer 1

您需要重新构建HTML，以为每个checbox拥有一个包装器div，然后使用$(this)来获取包装器中的复选框以显示/隐藏。

$('.switch-info').click(function() {
  if (this.checked) {
    $(this).closest('div').find('.txt-switch-info').hide();
  } else {
    $(this).closest('div').find('.txt-switch-info').show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label for="switch1">
  <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
</label>
  <span class="txt-switch-info" style="display: none;">show this div when unchecked</span>
</div>

<div>
  <label for="switch1">
  <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
</label>
  <span class="txt-switch-info" style="display: none;">show this div when unchecked</span>
</div>

<div>
  <label for="switch1">
  <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
</label>
  <span class="txt-switch-info" style="display: none;">show this div when unchecked</span>
</div>

Answer 2

使用相对于$(this)的DOM遍历函数。另外，您可以使用.toggle()代替编写自己的条件。

$(".switch-info").click(function() {
  $(this).parent().next().toggle(!this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="switch1">
      <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
</label>
<span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

<label for="switch2">
      <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch2" value="" class="switch-info" checked>
</label>
<span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

<label for="switch3">
      <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch3" value="" class="switch-info" checked>
</label>
<span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

Answer 3

您可以尝试一下。使用.parent().next

$('.switch-info').click(function() {
  this.checked ? $(this).parent().next('.txt-switch-info').hide() : $(this).parent().next('.txt-switch-info').show();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="switch1">
  <em class="txt-switch1">ON</em>  <input type="checkbox" id="switch1" value="" class="switch-info" checked>
</label>
<span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

<label for="switch2">
  <em class="txt-switch2">ON</em>  <input type="checkbox" id="switch2" value="" class="switch-info" checked>
</label>
<span class="txt-switch-info" style="display: none;">show this div when unchecked</span>

取消选中复选框时显示div

3 个答案: