Question

我是一名图书管理员，致力于改善我图书馆的主要搜索功能。我想要一个标有＆＃34; Everything＆＃34;的复选框。自动检查用户是否取消选择所有其他选项（＆＃34;书籍，＆＃34;＆＃34;文章，＆＃34;＆＃34;音乐，＆＃34;＆＃34;视频＆＃34; 。）

以下是相关的javascript：

$(document).ready(function() {
  var $others = $('input[class="checkoption"]').not('#everythingbox')
  $others.change(function() {
    if (this.checked==false) {
      $('#everythingbox').prop('checked', true)
    }
  });
});

我几乎让它工作了，但是有一个问题：如果我选择两个或更多选择并取消选择一个，＆＃34; Everything＆＃34;自动检查，但我只希望它自动检查是否没有其他检查。

以下是完整的小提琴：https://jsfiddle.net/kr0syfn3/11/

Answer 1

我编辑了你的小提琴。您基本上需要在发生更改时检查所有其他复选框并相应地更新所有内容框。

这是更新的小提琴jsfiddle.net/john_lay/kr0syfn3/12/

提前道歉，评论你的一些代码，但有很多重复。最后，您应该在findMemberByID()处理程序中添加更改事件。

Answer 2

每次点击其中任何一个复选框时，您都需要检查所有复选框。现在，您只是检查单击的单个。要检查所有这些，你需要使用一个循环（我在下面的示例中使用each函数），你可能不得不改变你的逻辑，因为你现在正在检查所有项目：

$(document).ready(function() {
  var $others = $('input[class="checkoption"]').not('#everythingbox');
    $others.change(function() {
      var othersToCheck = $('input[class="checkoption"]').not('#everythingbox');
      var anyChecked = false;
      $.each(othersToCheck, function(index) {
        if ($(this).checked) {
          anyChecked=true;
        }
      });
      $('#everythingbox').prop('checked', !anyChecked)
    });
});

Answer 3

您可以尝试选择所有选中的复选框，然后比较列表，看看是否已选中所有复选框？ E.g。

var $others = $('input[class="checkoption"]').not('#everythingbox')

$others.change(function() {
    var $checked = $('input[class="checkoption"]:checked').not('#everythingbox')
    if ($checked.length != $others.length) { //not all the boxes are checked
        $('#everythingbox').prop('checked', true)
    }
}

希望这有帮助！

Answer 4

最简洁的答案是利用jQuery内置选择器的强大功能，如下所示：

如果用户通过清除所选复选框的其余部分手动选择所有内容复选框，您还需要处理。

Warrior aragorn = new Warrior(Constants.WARRIOR_DAMAGE_BONUS_POINT);

$(document).ready(function() {
  var $inputs = $('input.checkoption');
  $inputs.on("change", function() {
    if ($(this).attr("id") !== "everythingbox") {
      $('#everythingbox').prop('checked', !$('input.checkoption:not(#everythingbox):checked').length)
    } else {
      $inputs.not("#everythingbox").prop("checked", false);
    }
  });
});

Answer 5

var $others = $('input[class="checkoption"]').not('#everythingbox')
console.log($others)
$('#everythingbox').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
        $('#everythingbox').attr('disabled', true);
    }
});
$others.change(function () {
    var check = false;
    var l = $others.length;
    for (var i = 0; i < l; i++) {
        if ($others[i].checked) {
            check = true;
        }
    }
    if (check) {
        $('#everythingbox').attr('disabled', false);
        $('#everythingbox').prop('checked', false);
    } else {
        $('#everythingbox').attr('disabled', true);
        $('#everythingbox').prop('checked', true);
    }
})




var music1 = $("input[id='musiccheck']");
var music2 = $("input[id='musicscores']");

music1.on('change', function () {
    music2.prop('checked', this.checked);
});

music1.on('change', function () {
    music2.prop('unchecked', this.unchecked);
});

$(document).ready(function () {

});

如果未选中其他组，则自动选中复选框

5 个答案: