使用jQuery显示/隐藏Checkbox

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')正在评估,以虚假它是否被选中与否.我最好的猜测是我使用$(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

使用不内联的事件处理程序,然后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>

小提琴

这甚至适用于具有相同标记的多个fieldset.

Answer 3

尝试通过jQuery绑定事件,然后您可以访问$(this):

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