Select multiple ID's - Both checkboxes must be

问题:

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!

回答1:

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

回答2:

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!

回答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
}

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

回答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:

I would give both (or as many as you like) the same class='chk_option'. If you are using jQuery, then you could do this:

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

When you are defining the on click events for each simply do this:

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

You can do it even with smarter function then isSelectedBoth() where it could return something more useful then true/false, like order number of un/checked box, an array of elements un/checked etc.

回答7:

There are two issues in your code:

1. you're using $('#checkbox1 #checkbox2') to select the two checkboxes, but without a comma that's an “ancestor descendant” selector and not a multiple selector

2. the is() operator returns true if at least one of the selected elements matches the given arguments. So, if you use if ($('#checkbox1, #checkbox2').is(':checked')) this is true whenever either one (but not necessarily both) checkboxes are checked

So, in order to do something when both checkboxes are checked you need to use is(':checked') on both separately, as in the top-voted answer.

Here is a demo showing is() behavior

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