Select multiple ID's - Both checkboxes must be selected

Question

Is there a way for two or more ID's be required to be checked before doing something.

For instance:

If BOTH Checkbox 1 and Checkbox 2 are checked then the event happens.

But if only 1 or the other are checked by themselves, something else happens.

I thought this would work but nope.

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

Hopefully I am explaining this correctly. I have looked for three days and I am stuck. Thanks for any help!

Answer 1

Boolean logic ftw! So I'm pretty sure you're looking for what's known as the exclusive or, or XOR. This means that if just one and only one operand is true, the whole expression will be true. If neither operand is true or if both are true, the whole expression will evaluate as false. The operator for this is ^. So here's the code (borrowing from Chris as the basic format)...

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

In reality, you only need an OR for the second if since we're using an else if and the first if covers when both are checked. But it's not as cool and obviously can't be used by itself to do the same thing (and is better for minifying *cough cough*).

Enjoy!

Answer 2

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

Answer 3

I would give the checkboxes a common class. Then use that as the selector and count the checked values. Then if two are checked do something. If one is checked then check the value of that one and do what you need to accordingly.

EDIT: So say for instance you assigned a common class of myCheckBoxes

So you could do the following pseudo code:

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

If the checkboxes are wrapped by some element:

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

Then the wrapping element can have the event listener:

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