Question

我有一个表单，如果选中了一个复选框，则会显示额外的字段，如果没有选中它们就会消失，我用来执行此操作的代码是：

$(function () {
    $('#cmntCheck').change(function () {
        if ($('#cmntCheck').is(':checked')) {
            $("#orderOptPanel").addClass('hidden');
            $("#stAddressRow").addClass('hidden');
            $("#cityRow").addClass('hidden');
            $("#stateRow").addClass('hidden');
        } else {
            $("#orderOptPanel").removeClass('hidden');
            $("#stAddressRow").removeClass('hidden');
            $("#cityRow").removeClass('hidden');
            $("#stateRow").removeClass('hidden');
        }
    }).change();
});

但它不起作用，我发现的作品是.toggleClass（），但这不是我要找的东西，我试过.show（）和.hide（）但它没有用，这就是为什么我这样做了我上面做的方式。我想要做的是当选中复选框时显示额外的字段，当没有选中时不显示它们。我该怎么做？

JSFiddle

Answer 1

$(function () {
    $('#cmntCheck').change(function () {
        var isChecked = $('#cmntCheck').is(':checked')

        $("#orderOptPanel").toggle(!isChecked);
        $("#stAddressRow").toggle(!isChecked);
        $("#cityRow").toggle(!isChecked);
        $("#stateRow").toggle(!isChecked);

    });
});

您可以使用toggle（接受bool）来设置样式属性而不是类。不知道你为什么要在变更处理程序之后触发更改事件？

Answer 2

#cmntCheck是div，因此无法检查。但是，您可以测试其输入的已检查状态。

您可以根据输入的已检查状态the stack显示所有元素：

$('#cmntCheck input').change(function () {
  $('#orderOptPanel, #stAddressRow, #cityRow, #stateRow').toggle(!this.checked);
}).change();

toggle()

Answer 3

如果您只需要显示/隐藏控件，那么添加名为隐藏的类就没有任何价值。只需调用显示和隐藏功能即可。这里的cmntCheck是您的复选框，而不是您的DIV

$(document).ready(function () {

   $("#cmntCheck").change(function () {

        var checked = $('#cmntCheck').is(':checked');
        if (checked) {
                 {
                    $("#orderOptPanel").hide();
                    $("#stAddressRow").hide();
                    $("#cityRow").hide();
                    $("#stateRow").hide();
                } else {
                    $("#orderOptPanel").show();
                    $("#stAddressRow").show();
                    $("#cityRow").show();
                    $("#stateRow").show();
                }
            })
        }); 
});

Answer 4

你可能错过了css类：

.hidden
{
    display: none;
}

http://jsfiddle.net/wd1z0zmg/4/

或者以最小化的方式做到这一点：

$('#cmntCheck').change(function () {
       $('#cmntCheck').is(':checked') ? $("#orderOptPanel, #stAddressRow,#cityRow,#stateRow").hide() : $("#orderOptPanel,#stAddressRow,#cityRow,#stateRow").show();          
    });

http://jsfiddle.net/wd1z0zmg/5/

在JQuery中添加删除类

4 个答案: