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

我有以下代码：

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

$（）.ready（函数（））{
$（'.question'）.live（'click'，function（））{
$（'答案'）.show（300）；
}
,
函数（）{
$（'.answer'）.hide（200）；
}
);
});

有人能帮我怎么用checkbox吗？如果可能，也可以在复选框隐藏时将其设置为空（取消选中）。

尝试

$(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']()
    });

});

演示：

或

试试这个

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

<script>
    $().ready(function(){
        $('.coupon_question').live('click',function() 
        {
            if ($('.coupon_question').is(':checked')) {
                $(".answer").show();
            } else {
                $(".answer").hide();
            } 
        });
    });
</script>

---

将

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”）.show（）；
其他的
$（“.answer”）.hide（）；
}

试试这个

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

<script>
    $().ready(function(){
        $('.coupon_question').live('click',function() 
        {
            if ($('.coupon_question').is(':checked')) {
                $(".answer").show();
            } else {
                $(".answer").hide();
            } 
        });
    });
</script>

$（）.ready（函数（））{
$（'.coupon_question'）.live（'单击'，函数（））
{
如果（$（'.优惠券\问题'）。是（':checked'））{
$（“.answer”）.show（）；
}否则{
$（“.answer”）.hide（）；
} 
});
});

最简单-我还将checkbox类更改为ID:

$（函数（）{
$（“#优惠券问题”）。在（“单击”，函数（）{
$（“.answer”）.toggle（选中此项）；
});
});
。回答{显示：无}

你有优惠券吗？
对
您的优惠券：

批量分配
函数chkBulk（）{
如果（$（'[id$=chkBulkAssign]'）[0]。已选中）{
$（'div.icheckbox_flat-green'）.addClass（'checked'）；
$（“[id$=btneNoteBulkExcelUpload]”。show（）；
}
否则{
$（'div.icheckbox_flat-green'）.removeClass（'checked'）；
$（“[id$=btneNoteBulkExcelUpload]”。隐藏（）；
} 
您的示例太复杂了（对于初学者来说很难理解；尽管它可能是一段高效的代码），请您对其进行注释。我需要运行不同的操作，除了显示和隐藏。这是我想做的唯一方法吗？：请记下。live（）从jQuery的1.7版开始就不推荐使用。请改用Arun+1的答案中给出的.on（）隐藏jQuery，而不是css中的display:none；这似乎是正确的方法，以防某些用户禁用js。@EswaraReddy，+1，这是我找到的最好的答案far@lmiguelvargasf谢谢
    <label  onclick="chkBulk();">
    <div class="icheckbox_flat-green" style="position: relative;">
      <asp:CheckBox ID="chkBulkAssign" runat="server" class="flat" 
       Style="position: 
         absolute; opacity: 0;" />
      </div>
      Bulk Assign
     </label>



    function chkBulk() {
    if ($('[id$=chkBulkAssign]')[0].checked) {
    $('div .icheckbox_flat-green').addClass('checked');
    $("[id$=btneNoteBulkExcelUpload]").show();           
    }
   else {
   $('div .icheckbox_flat-green').removeClass('checked');
   $("[id$=btneNoteBulkExcelUpload]").hide();
   }