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

Question

我有这个代码:

   <fieldset class="question">
       <label for="coupon_question">Do you have a coupon?</label>
       <input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
       <span class="item-text">Yes</span>
   </fieldset>

   <fieldset class="answer">
       <label for="coupon_field">Your coupon:</label>
       <input type="text" name="coupon_field" id="coupon_field"/>
   </fieldset>

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

<script>
    $().ready(function(){

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

    });
</script>

有人可以帮我看看如何使用复选框吗？如果可能的话,隐藏(取消选中)隐藏的复选框.

Answer 1

试试这个

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

小提琴

Answer 2

将onchange事件附加到复选框:

<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>

<script type="text/javascript">
function valueChanged()
{
    if($('.coupon_question').is(":checked"))   
        $(".answer").show();
    else
        $(".answer").hide();
}
</script>

Answer 3

最简单 - 我也将复选框类更改为ID:

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

.answer { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset class="question">
  <label for="coupon_question">Do you have a coupon?</label>
  <input id="coupon_question" type="checkbox" name="coupon_question" value="1" />
  <span class="item-text">Yes</span>
</fieldset>

<fieldset class="answer">
  <label for="coupon_field">Your coupon:</label>
  <input type="text" name="coupon_field" id="coupon_field" />
</fieldset>