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

そして、フィールドセットの「質問」のチェックボックスをクリックした後、「回答」フィールドセットを表示/非表示にしたいと思います（デフォルトは非表示です）。次のような古典的な要素のテクニックを使用してそれを行うことができませんでした：

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

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

    });
</script>

チェックボックスを使用してそれを行う方法を誰かが手伝ってくれませんか? また、チェックボックスが非表示になっている場合は、チェックボックスを無効にする (チェックを外す) こともできます。

Answer 1

試す

$(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 2

これを試して

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

Answer 3

$(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 4

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