Làm thế nào để hiển thị/ẩn một phần tử trên các hộp kiểm được chọn/bỏ chọn bằng cách sử dụng jQuery?

Question

tôi có mã này:

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

Và tôi muốn để hiển thị/ẩn các "câu trả lời" fieldset (mặc định là ẩn) sau khi một nhấp chuột vào hộp kiểm trong fieldset "câu hỏi" Làm thế nào để làm điều đó. Tôi không thể thực hiện điều đó bằng cách sử dụng kỹ thuật cho một bộ từ điển kinh điển như:

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

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

    }); 
</script> 

Ai đó có thể giúp tôi cách thực hiện điều đó bằng hộp kiểm? Ngoài ra nếu có thể null (bỏ chọn) hộp kiểm khi nó bị ẩn.

Answer 1

Đính kèm onchange sự kiện vào hộp kiểm:

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

Hãy thử

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

}); 

Demo: Fiddle

Hoặc

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

Hãy thử điều này

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

FIDDLE

Answer 5

Hãy thử điều này

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

Answer 6

đơn giản nhất - và tôi đã thay đổi lớp hộp kiểm để ID cũng như:

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