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.

小提琴链接供参考

$('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();
});

Answer 2

尝试隐藏最初使用类div1的所有div，

 $(".div1").hide();
 $('input[type="checkbox"]').click(function() {
     $(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
 });

使用div1和next()

切换相关div元素与类toggle()的可见性

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

2 个答案:

DEMO