选择多个ID – 必须选中两个复选框

在做某事之前是否需要检查两个或更多ID的方法。

例如：

如果选中BOTH Checkbox 1和Checkbox 2，则会发生事件。

但如果只有1个或其他自己检查，则会发生其他事情。

我认为这会起作用，但不是。

function toggleStatus() { if ($('#checkbox1 #checkbox2').is(':checked')) { $('.option1 :input').attr('checked', true); } else { $('.option1 :input').attr('checked', false); } function toggleStatus() { if ($('#checkbox1').is(':checked')) { $('.option2 :input').attr('checked', true); } else { $('.option2 :input').attr('checked', false); } function toggleStatus() { if ($('#checkbox2').is(':checked')) { $('.option3 :input').attr('checked', true); } else { $('.option3 :input').attr('checked', false); } 

希望我正确解释这一点。 我已经找了三天而且我被卡住了。 谢谢你的帮助！

Answer 1

 $('#checkbox1, #checkbox2').change(function() { if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { // Do some stuff if both boxes are checked... } }); 

Answer 2

布尔逻辑ftw！ 所以我很确定你正在寻找所谓的独家或者XOR。 这意味着如果只有一个且只有一个操作数为true，则整个表达式将为true。 如果两个操作数都不为真或两者都为真，则整个表达式将计算为false。 这个运营商是^ 。 所以这是代码（借用Chris作为基本格式）……

 $('#checkbox1, #checkbox2').change(function() { if($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { // Both are checked } else if($('#checkbox1').is(':checked') ^ $('#checkbox2').is(':checked')) { // Exactly one is checked } }); 

实际上， if因为我们正在使用else if而第一个if覆盖时检查两者，则只需要第二个OR。 但它并不那么酷，显然不能单独使用它来做同样的事情（并且更好地缩小*咳嗽咳嗽*）。

请享用！

Answer 3

我会给复选框一个普通的类。 然后将其用作选择器并计算选中的值。 然后，如果两个被检查做某事。 如果选中一个，则检查该值的值，并相应地执行所需操作。

编辑：所以说你分配了一个共同的myCheckBoxes类

所以你可以做以下伪代码：

 var myCheckBoxes = $('.myCheckBoxes:checked') //not sure on selector if (myCheckBoxes.length == 2) //do something because both are checked else if (myCheckBoxes.length == 1) { if (myCheckBoxes.val() == "A") // do something because A was checked else if (myCheckBoxes.val() == "B") // do something because B was checked } 

Answer 4

 var ids = ['#checkbox1', '#checkbox2'], $chx = $(ids.join(',')), count = $chx.length; $chx.on('change', function() { if ($chx.filter(':checked').length === count) { // do stuff console.log('all true'); } }); 

如果复选框由某个元素包装：

 
  one   two   

然后包装元素可以有事件监听器：

 $('.check-group').each(function() { var $this = $(this), $chx = $this.find('input[type=checkbox]'), count = $chx.length; if (count === 0) { return; } $this.on('change', function() { if (count === $chx.filter(':checked').length) { console.log('all checked'); } }); }); 

Answer 5

 $(document).ready(function() { var check1 = $("#check1"); var check2 = $("#check2"); // this method decides what to do when a checkbox is clicked var trigger_event = function() { if (check1.attr("checked") && check2.attr("checked")) { event1(); } else if (check1.attr("checked") && !check2.attr("checked")) { event2(); } else if (!check1.attr("checked") && check2.attr("checked")) { event3(); } }; // append event check1.click(function() { trigger_event(); }); check2.click(function() { trigger_event(); }); }; 

Answer 6

我会给两个（或你喜欢的）同一个class =’chk_option’。 如果您使用的是jQuery，那么您可以这样做：

 function isSelectedBoth(){ var result = true; $('.chk_option').each(function(){ if(!$(this).is(':checked')) result=false; }); return result; } 

当您为每个事件定义点击事件时，只需执行以下操作：

 $('.chk_option').change(function(e){ if (isSelectedBoth()){ // do something if both are selected alert('both checkboxes are selected'); }else{ // do something if not alert('You must select both checkboxes'); } }); 

您甚至可以使用更智能的function来执行此操作，然后使用isSelectedBoth（），它可以返回更有用的内容，然后返回true / false，例如un / checked框的订单号，un / checked的元素数组等。

Answer 7

您的代码中存在两个问题：

1. 你正在使用$('#checkbox1 #checkbox2')来选择两个复选框，但是没有逗号是“祖先后代”选择器而不是多选择器

2. 如果至少有一个选定元素与给定参数匹配，则is()运算符返回true 。 所以，如果你使用if ($('#checkbox1, #checkbox2').is(':checked'))只要if ($('#checkbox1, #checkbox2').is(':checked'))一个（但不一定是两个）复选框，这都是真的

因此，为了在选中两个复选框时执行某些操作，您需要单独使用is(':checked') ，就像在最高投票的答案中一样 。

这是一个演示is()行为的演示

 $('input').on('change', function(ev) { if ($('#checkbox1, #checkbox2').is(':checked')) { console.log("is(':checked') true because at least one is checked"); } else { console.log("is(':checked') not true"); }; if ($('#checkbox1').is(':checked') && $('#checkbox2').is(':checked')) { console.log("both checked"); } }); 

  checkbox1 checkbox2