如何使用jQuery显示/隐藏复选框选中/未选中状态的元素？

我有这个代码：

 Do you have a coupon?  Yes 
 
 Your coupon:   

并且我想在单击字段集“问题”中的复选框后显示/隐藏“答案”字段集（默认为隐藏）如何执行此操作。 我无法使用这种经典elemetn的技术：

  $().ready(function(){ $('.question').live('click',function() { $('.answer').show(300); } , function(){ $('.answer').hide(200); } ); });  

有人可以帮我使用复选框吗？ 如果可能的话，隐藏（取消选中）隐藏的复选框。

Answer 1

将onchange事件附加到复选框：

Answer 2

试试这个

 $(".answer").hide(); $(".coupon_question").click(function() { if($(this).is(":checked")) { $(".answer").show(300); } else { $(".answer").hide(200); } }); 

小提琴

Answer 3

最简单 – 我也将复选框类更改为ID：

 $(function() { $("#coupon_question").on("click",function() { $(".answer").toggle(this.checked); }); }); 

 .answer { display:none } 

  
 Do you have a coupon?  Yes 
 
 Your coupon:   

Answer 4

尝试

 $(document).ready(function(){ //Register click events to all checkboxes inside question element $(document).on('click', '.question input:checkbox', function() { //Find the next answer element to the question and based on the checked status call either show or hide method $(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']() }); }); 

演示： 小提琴

要么

 $(document).ready(function(){ //Register click events to all checkboxes inside question element $(document).on('click', '.question input:checkbox', function() { //Find the next answer element to the question and based on the checked status call either show or hide method var answer = $(this).closest('.question').next('.answer'); if(this.checked){ answer.show(300); } else { answer.hide(300); } }); }); 

Answer 5

 $(document).ready(function() { $(document).on("click", ".question", function(e) { var checked = $(this).find("input:checkbox").is(":checked"); if (checked) { $('.answer').show(300); } else { $('.answer').hide(300); } }); }); 

Answer 6

试试这个