检查是否选中了特定的复选框

Question

I have a form with multiple checkboxes like this:

<form id="myForm">
   <input type="checkbox" id="first" />
   <input type="checkbox" id="second" />
   <input type="checkbox" id="third" />
</form>

I want to do something (ie alert box) only when checkbox 1 and 3 are selected.

I know how to target one check box like this:

$('#first').click(function () {
    if ($(this).prop("checked") == true) {
        alert("I'm checked!");
    }
});

But is there a way to do that for specific multiple checkboxes?

Answer 1

This answer works on the premise that you want to when either of the specified check-boxes are checked, rather than when they're both checked, this can be done with either comma separated selectors:

$('#first, #third')

Or through the use of a class-name to identify the relevant elements:

$('.alertIfSelectedClassName')

With the HTML of:

<form id="myForm">
  <input type="checkbox" class="alertIfSelectedClassName" id="first" />
  <input type="checkbox" id="second" />
  <input type="checkbox" class="alertIfSelectedClassName" id="third" />
</form>

The use of CSS attribute selection,nbased on a shared attribute, such as the name of the <input> :

$('input[name=alertIfSelectedElementName')

HTML:

<form id="myForm">
  <input type="checkbox" name="alertIfSelectedElementName" id="first" />
  <input type="checkbox" id="second" />
  <input type="checkbox" name="alertIfSelectedElementName" id="third" />
</form>

Answer 2

You can iterate through them:

<form id="myForm">
    <input type="checkbox" name="somename" id="first" />
    <input type="checkbox" name="somename" id="second" />
    <input type="checkbox" name="somename" id="third" />
</form>

$('checkbox[name=somename"]').each(function () {
    if ($(this).prop("checked") == true) {
        alert("I'm checked!");
    }
});

Answer 3

Try this:

      $('#first, #third').click(function () {
          var firstChecked = $('#first).prop("checked") == true);
          var thirdChecked = $('#third).prop("checked") == true);
          if (firstChecked  && thirdChecked ) {
             alert("I'm checked!");
          }
       })

Answer 4

https://jsfiddle.net/p1zjaw46/

var $toCheck = $('#first').add('#third');
$(function () {
  $('input[type="checkbox"]').on('change', function () {


    if ( $toCheck.filter(':checked').length === $toCheck.length )
      alert('good');
    else
      alert('bad');
  })
});

Basically:

1. cache the items you want to check into a var. $toCheck in this case.
2. When any are changed , do a quick check. You filter by ":checked" , and compare the length of the results of the filter to the length of the original set of checkboxes.

If they aren't equal, at least one of the expected boxes aren't checked!

Why is this answer better than others?

It's scalable

All you need to do is add new elements to $toCheck and the rest is automatic

Answer 5

You can check if the checkbox is checked using is(':checked') , you can check the if the both are checked using && sign check example bellow.

Hope this helps.

---

 $("#first, #third").click(function () { if ($('#first').is(':checked') && $('#third').is(':checked')) { alert("Message!"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myForm"> <input type="checkbox" id="first" /> <input type="checkbox" id="second" /> <input type="checkbox" id="third" /> </form> 

Answer 6

In order to target a specific elements, try using a css class as a selector. Also, include the input type so that you don't have any conflict with other elements having the same class. In order to check if all the required checkboxes are checked or not, you can use .each() loop and determine if they are all checked and based on that display the alert() . The following approach avoids any hardcoding and multiple if checks.

$("input:checkbox.test").click(function()
{
    var allchecked = true;
    $("input:checkbox.test").each(function(){
        if(!$(this).is(":checked")) 
           allchecked = false;         
    });

    if(allchecked)
      alert("Im checked");
});

Working example : https://jsfiddle.net/DinoMyte/fy1asfws/34/