里面的ID部分找到所有的复选框，并检查并隐藏其他未经检查

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”？

TQ

Answer 1

这是更好地使用.click()，而不是内嵌的JavaScript onclick。

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

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

Fiddle Demo

Answer 2

使用.change()事件，而不是.click()。试试这个：

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

DEMO

Answer 3

试试这个：

$("#answer input").change(function() { 
    if ($(this).is(":checked")) { 
     $("#answer input").not(this).each(function() { 
      $(this).parent().css("display", "none"); 
     }) 
    } else { 
     $("#answer input").not(this).each(function() { 
      $(this).parent().css("display", "block"); 
     }) 
    } 
}); 

DEMO