Question

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

例如：

如果 BOTH 选中复选框1和复选框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的OR，因为我们使用else if并且在检查两个if时都会使用{{1}}。但它并不是很酷，显然不能单独使用它来做同样的事情（并且更好地缩小*咳嗽咳嗽*）。

享受！

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

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

<div class="check-group">
    <label><input id="checkbox1" type="checkbox"> one </label>
    <label><input id="checkbox2" type="checkbox"> two </label>
</div>

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

$('.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');
    }
});

即使使用更智能的功能，你也可以使用isSelectedBoth（），它可以返回比true / false更有用的东西，比如un / checked box的顺序号，un / checked元素的数组等。

Answer 7

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

您正在使用$('#checkbox1 #checkbox2')选中这两个复选框，但没有逗号 “ancestor descendant” selector ，而不是 multiple selector
如果所选元素中至少有一个与给定参数匹配，is()运算符将返回true。因此，如果您使用if ($('#checkbox1, #checkbox2').is(':checked'))，只要选中其中一个（但不一定是两个）复选框，这都是正确的

因此，为了在选中两个复选框时执行某些操作，您需要单独使用is(':checked')，例如the top-voted answer。

以下是显示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");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" id="checkbox1"/>checkbox1<label>
<label><input type="checkbox" id="checkbox2"/>checkbox2</label>

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

7 个答案: