javascript - 在复选框上单击动态显示隐藏具有相同类的 div

Question

我想单击复选框并隐藏相应的内容。

现在，在我的代码中，当我单击任一复选框时，具有相同类的所有内容都会被隐藏。

Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.

fiddle 链接供引用

$('input[type="checkbox"]').click(function() {
  if ($(this).is(":checked")) {

    $('.div1').hide();
  } else {
    $('.div1').show();
  }
});

<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
  <input type="checkbox">Exam1
  <div class="div1">I am content1!
  </div>
  <br>
  <input type="checkbox">Exam2
  <div class="div1">I am content2!
  </div>
  <br>
  <input type="checkbox">Exam3
  <div class="div1">I am content3!
  </div>
  <br>
  <input type="checkbox">Exam4
  <div class="div1">I am content4!
  </div>
  <br>
</form>

https://jsfiddle.net/6ybp2tL6/

这可能吗？

提前致谢

Answer 1

试试这个 DEMO

$('input[type="checkbox"]').click(function() {
  ($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});