裏面的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