Hiện/Ẩn với Hộp kiểm bằng cách sử dụng jQuery

Question

Tôi đang cố gắng có một phần của biểu mẫu html để hiển thị/ẩn dựa trên hộp kiểm. Đây là mã bản chất tôi có:

<script src="/js/jquery.js"></script> 
<script language="JavaScript"> 
    function toggle(className){ 
     var $input = $(this); 
     if($(this).prop('checked')) 
      $(className).show(); 
     else 
      $(className).hide(); 
     } 
</script> 

<fieldset><legend>Check Here 
    <input type="checkbox" onclick="toggle('.myClass')" ></legend> 
    <span class="myClass"> 
     <p>This is the text.</p> 
    </span> 
</fieldset> 

Khi bạn nhấp vào hộp kiểm, khoảng bị ẩn và sẽ không quay lại. Tôi cũng đã sử dụng $(this).is(':checked'). Có vẻ như $(this).prop('checked') đang được đánh giá là false cho dù séc đó có được kiểm tra hay không. Tôi đoán tốt nhất là tôi đang sử dụng $(this) không chính xác. Tôi đang thiếu gì ở đây?

Answer 1

HTML, vượt qua this từ về sự kiện nhấp chuột

<input type="checkbox" onclick="toggle('.myClass', this)" ></legend> 

JS

function toggle(className, obj) { 
    var $input = $(obj); 
    if ($input.prop('checked')) $(className).hide(); 
    else $(className).show(); 
} 

OR, mà không sử dụng prop bạn chỉ có thể làm:

function toggle(className, obj) { 
    if (obj.checked) $(className).hide(); 
    else $(className).show(); 
} 

OR, trong một dòng sử dụng .toggle(display):

function toggle(className, obj) { 
    $(className).toggle(!obj.checked) 
} 

Answer 2

Sử dụng một event handler rằng is'nt nội tuyến, và sau đó chỉ cần toggle() các yếu tố dựa trên trạng thái hộp kiểm:

<script src="/js/jquery.js"></script> 
<script type="text/javaScript"> 
    $(function() { 
     $('input[type="checkbox"]').on('change', function() { 
      $(this).closest('fieldset').find('.myClass').toggle(!this.checked); 
     }); 
    }); 
</script> 

<fieldset> 
    <legend>Check Here<input type="checkbox"></legend> 
    <span class="myClass"> 
     <p>This is the text.</p> 
    </span> 
</fieldset> 

FIDDLE

Điều này thậm chí có thể làm việc với một số của fieldset với đánh dấu tương tự.

Answer 3

thử ràng buộc sự kiện thông qua jQuery, và sau đó bạn có thể truy cập vào $(this):

$(document).ready(function() { 
    $(":checkbox").click(function(event) { 
    if ($(this).is(":checked")) 
     $(".myClass").show(); 
    else 
     $(".myClass").hide(); 
    }); 
});