使用jQuery顯示/隱藏複選框

Question

我想要根據複選框顯示/隱藏HTML表單的一部分。這是我有的基本代碼：

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

當您單擊複選框時，跨度被隱藏並且不會回來。我也使用$(this).is(':checked')。看起來$(this).prop('checked')正在對false進行評估，無論它是否被檢查。我最好的猜測是我錯誤地使用$(this)。我在這裏錯過了什麼？

Answer 1

HTML，從上單擊事件傳遞this

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

，或在不使用prop你可以這樣做：

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

，或者在一個線使用.toggle(display)：

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

Answer 2

使用基於該複選框狀態的事件處理程序，is'nt內聯，然後就toggle()元素：

<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

這甚至幾個字段集與相同的標記工作。

Answer 3

嘗試通過jQuery綁定事件，然後你就可以訪問到$(this)：

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