使用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)。我在这里错过了什么？

- Andrew

---

尝试：toggle(this,'.myClass') - Diodeus - James MacFarlane

Answer 1

HTML，从点击事件中传递this

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

JS

的翻译是：

JavaScript

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

- palaѕн

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>

FIDDLE

即使有多个具有相同标记的字段集，此方法也可以使用。

- adeneo

---

这可能是一般情况下“最好”的答案，但它超出了我的技能水平；我只尝试使用我理解的编码。 - Andrew

Answer 3

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

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

- kpull1

Answer 4

<input type="checkbox" checked>
<input type="text" id="amount">

$document.ready(function() {
 $("input:checked").on("click",function () {
   $("#amount").toggle()
 })
});

- vikas pandey