javascript - 在 id div 中找到所有复选框并选中并隐藏其他未选中的

Question

我正在尝试学习和创建一个 jquery，它 $("#answer") 并找到里面的所有复选框并检查。例如，如果 #a1 中的复选框被选中，则其他 div (a2,a3,a4) 被隐藏或出现其他消息。如果我取消选中 #a1，所有的 div 将再次出现。请赐教代码。

  <div id="answer">
    <div id="a1">A.<input type="checkbox" name="a1" onclick="cbox()" ></input></div>
    <div id="a2">B. <input type="checkbox" name="a2"onclick="cbox()"></input></div>
    <div id="a3">C. <input type="checkbox" name="a3"onclick="cbox()"></input></div>
    <div id="a4">D. <input type="checkbox" name="a4"onclick="cbox()"></input></div>
                        </div>


function cbox() {
  if (this checkbox is checked)  { 
    target other div inside (#answer) and add .hide()
  }
}

2) 有没有办法在我不需要使用 onlick="cbox"的地方添加触发器？

问答

Answer 1

最好用 .click() 而不是内联 javascript onclick。

但是，您应该使用 .change() input 元素的事件而不是点击:

$('input[type="checkbox"]').change(function() {
    $(this).parent().siblings('div').toggle(!this.checked); 
});

Fiddle Demo