使用jQuery显示/隐藏Checkbox

我试图根据复选框显示/隐藏html表单的一部分。 这是我的基本代码：

  function toggle(className){ var $input = $(this); if($(this).prop('checked')) $(className).show(); else $(className).hide(); }  
Check Here 
  
This is the text.
   

当您单击复选框时，跨度将被隐藏，并且不会再返回。 我还使用了$(this).is(':checked') 。 似乎$(this).prop('checked')正在评估是否检查它是否为false 。 我最好的猜测是我正在使用$(this) 。 我在这里想念的是什么？

Answer 1

HTML，从点击事件传递this信息

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

使用不内联的事件处理程序，然后根据复选框状态toggle()元素：

   
 
Check Here
  
This is the text.
   

小提琴

这甚至可以与具有相同标记的多个fieldset一起使用。

Answer 3

尝试通过jQuery绑定事件，然后你可以访问$(this) ：

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