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

Question

Есть ли способ проверить наличие двух или более идентификаторов, прежде чем что-то делать.

Например:

Если ОБА Флажок 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. Это означает, что, если только один и только один операнд является истинным, все выражение будет истинным. Если ни один из операндов не является истиной или оба являются истиной, все выражение будет оцениваться как ложное. Оператор для этого ^. Итак, вот код (заимствование у Криса в качестве основного формата) ...

$('#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 покрытия, когда оба проверены. Но это не так круто и, очевидно, не может использоваться само по себе, чтобы делать то же самое (и лучше для уменьшения * кашля *).

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

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>

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

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

Я бы дал обоим (или столько, сколько вам нравится) один и тот же класс = '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 / check, массив элементов un / checked и т. д.

Answer 6

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

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

1. вы используете $('#checkbox1 #checkbox2') для выбора двух флажков, но без запятой это селектор «потомок предка» , а не множественный селектор

2. оператор is() возвращает true, если хотя бы один из выбранных элементов соответствует заданным аргументам. Таким образом, если вы используете if ($('#checkbox1, #checkbox2').is(':checked')), то это верно, когда один из (но не обязательно оба) флажков установлен

Итак, чтобы сделать что-то, когда установлены оба флажка , необходимо использовать is(':checked') для обоих по отдельности, как в ответе с наибольшим количеством голосов .

Демонстрация поведения is() 1035 *

$('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>