Выбор нескольких идентификаторов - оба флажка должны быть выбраны

Ответ 1

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

Ответ 2

Логическая логика ftw! Поэтому я уверен, что вы ищете то, что известно как эксклюзивное или XOR. Это означает, что если верно только один и только один операнд, все выражение будет истинным. Если ни один из операндов не является истинным, или если оба они истинны, все выражение будет оцениваться как ложное. Оператор для этого ^. Итак, вот код (заимствование у Криса в качестве основного формата)...

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

В действительности вам нужно только OR для второго if, так как мы используем else if и первые if обложки, когда оба проверяются. Но это не так круто и, очевидно, нельзя использовать само по себе, чтобы сделать то же самое (и лучше для того, чтобы уменьшить кашель от кашля *).

Наслаждайтесь!

Ответ 3

Я бы поставил флажки в общий класс. Затем используйте это как селектор и подсчитайте отмеченные значения. Затем, если два проверены, сделайте что-нибудь. Если один из них отмечен, проверьте значение этого и сделайте то, что вам нужно.

EDIT: скажем, например, вы назначили общий класс 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
}

Ответ 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>

Тогда в элементе wrapper может быть прослушиватель событий:

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

Ответ 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();
   });

};

Ответ 6

Я хотел бы дать (и столько, сколько вам нравится) тот же class= 'chk_option'. Если вы используете jQuery, вы можете сделать это:

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

Когда вы определяете события on click для каждого, просто выполните это:

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

Вы можете сделать это даже с более умной функцией thenSelectedBoth(), где он может вернуть что-то более полезное, чем true/false, например номер заказа un/checked, массив элементов un/checked и т.д.

Ответ 7

В коде есть две проблемы:

• вы используете $('#checkbox1 #checkbox2'), чтобы выбрать два флажка, но без запятой, чтобы "предка-потомка" селектор а не множественный селектор

• оператор is() возвращает true, если хотя бы один из выбранных элементов соответствует заданным аргументам. Итак, если вы используете 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");
  }
});

<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>