取消选中复选框时显示div

时间:2019-11-19 01:24:12

标签: jquery

我已经选中了该复选框,如果未选中,则显示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>

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

3 个答案:

答案 0 :(得分:0)

您需要重新构建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>

答案 1 :(得分:0)

使用相对于$(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>

答案 2 :(得分:0)

您可以尝试一下。使用.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>