Question

我的表单中有两个相同的复选框。一个位于顶部区域（＆＃39;＃locked1＆＃39;），一个位于底部区域（＆＃39; #locked2＆＃39;）。他们正在做同样的事情，应该表现得一样。意味着如果我取消选中顶部复选框，则底部复选框也应取消选中。我已经建立了一个可行的解决方案，但我不喜欢它。这是一项简单的任务，不需要那么多行代码。但我没有更好的主意。也许你呢？

$('#locked1').change(function () {
            if ($(this).is(":checked")) {
                $('#locked2').prop('checked', true);
            } else {
                $('#locked2').prop('checked', false);
            }
        });

        $('#locked2').change(function () {
            if ($(this).is(":checked")) {
                $('#locked1').prop('checked', true);
            } else {
                $('#locked1').prop('checked', false);
            }
        });

Answer 1

您可以将其更改为类并定位所有复选框或查找＃locked1和＃locked2并检查更改事件并采取任何checked - 值，您更改的值为：

var checkboxes = $("#locked1, #locked2");

checkboxes.change(function() {
    checkboxes.prop("checked", this.checked);
});

Answer 2

嗯，你可以做这样的事情：

$("#locked1").changed(function() {
    $("#locked2").prop("checked", $(this).is(":checked"));
}

$("#locked2").changed(function() {
    $("#locked1").prop("checked", $(this).is(":checked"));
}

编辑：voigtan的答案比我的解决方案更简洁。虽然，小心使用.checked，因为我过去曾遇到过这个问题。

Answer 3

请改为尝试：

$('#locked1,#locked2').change(function(){
   $('#locked1,#locked2').prop('checked', $(this).is(":checked"));
});

Demo

Answer 4

与其他人建议的答案大致相同，但您可以将它们组合成一个功能，以便于维护。

$('input[id^=locked]').on("click",function () {
    $('input[id^=locked]').prop('checked', $(this).is(":checked"));
});

如果两个输入有一个共享类来选择它们，那会稍微简单一点。但这很有效。

2个具有相同行为的复选框

4 个答案: