CODEWITHSUNDEEP
javascriptjquerycheckbox
Jorrex
Jorrex

Reputation: 1500

jQuery selector in variable - count checked checkboxes

This might be a question which has already been asked, but I couldn't find the right answer for it. So I'm asking it just to be sure.

Now, I know jQuery provides an attribute selector such as :checked to get all the checked checkboxes, but you would need to include this in the selector itself.

But is there a way to do this seperately from the selector? What I mean is, what if you store your selector in a variable?

Example

var checkboxSelector = $("input[name='myCheckboxes']");

So this would have a general use in the overall code, so I wouldn't have to write the selector each time I need it. But what if I wanted to get the total amount of checked checkboxes with the name-attribute myCheckboxes?

The obvious way would be $("input[name='myCheckboxes']:checked").length, but since I'm using my variable checkboxSelector I cannot include the :checked-selector.

The way I know to get the total amount would be to use an .each() on my selector and use a counter to get the total amount, but I was wondering if there was an easier way to achieve this?

so instead of doing this:

var checkboxSelector = $("input[name='myCheckboxes']");
/* Do some stuff with the variable*/

/* Time to get the total amount of checked checkboxes */
var count = 0;
checkboxSelector.each(function() {
      if($(this).is(":checked"))
           count++;
});

I was hoping there would be a way to do it like this (or something similar)

var count = checkboxSelector.is(":checked").length;

Now I know this wouldn't give me the total amount, but it is just an example. Is there any way to give me the count of all checked checkboxes by storing my selector in a variable? Preferably by not using an .each() to get the count.

Thanks in advance!

EDIT

Just to be clear, I cannot use the following selector:

var count = $("input[name='myCheckboxes']:checked").length;

since my selector is stored in a variable, I would have to use it like this:

var checkboxSelector = $("input[name='myCheckboxes']");
/* At this point I cannot include the :checked attribute anymore */

So $("input[name='myCheckboxes']:checked") is not an option.

Upvotes: 1

Views: 1030

Answers (4)

Max
Max

Reputation: 1010

If you want to use your variable for the selector, like you stated:

var checkboxSelector = $("input[name='myCheckboxes']");

You can nicely use jQuery's filter like this:

checkboxSelector.filter(':checked').length

More info in the official documentation: http://api.jquery.com/filter/#filter-selector

Upvotes: 3

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You can do it like following.

var count = $('input[name="myCheckboxes"]:checked').length

Update: Use filter()

var count = $('input[name="myCheckboxes"]').filter(':checked').length

Upvotes: 2

Patrick Evans
Patrick Evans

Reputation: 42736

Just call .filter on your jQuery object passing it the selector you want to filter on. So in this case pass it the :checked selector and it will return a collection of only checked elements 

 var checkboxSelector = $("input[name='myCheckboxes']");

 /* some place else */
 var numChecked = checkboxSelector.filter(":checked").length;
 console.log(numChecked);

Demo

var checkboxSelector = $("input[name='myCheckboxes']");

$("button").click(function(){
  var numChecked = checkboxSelector.filter(":checked").length;
  $("#log").html(numChecked);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Check 1: <input name="myCheckboxes" type="checkbox" value="3"></label><br>
<label>Check 2: <input name="myCheckboxes" type="checkbox" value="2"></label><br>
<label>Check 3: <input name="myCheckboxes" type="checkbox" value="1"></label><br>
<label>Check 4: <input name="myCheckboxes" type="checkbox" value="0"></label><br>
<button>Get Count</button><br>
<div id="log"></div>

Upvotes: 4

Alex Gyoshev
Alex Gyoshev

Reputation: 11977

Since you already have the checkboxes queried, you can filter only the checked ones:

var checkedCount = checkboxSelector.filter(":checked").length

Upvotes: 2

Related Questions