CODEWITHSUNDEEP
jquerycheckbox
Sunny D'Souza
Sunny D'Souza

Reputation: 626

Getting the values of checked checkboxes in JQuery

I am new to jquery and i had a doubt. I have the following jQuery script to check the number of checkboxes checked.

<script>
function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(":checked").click(countChecked);
</script>

However this works if i have only one set of checkboxes in the entire page. However I have several different sets of checkboxes and radio buttons throught the page. The checkboxes I want to bind the jQuery to, has the name attribute as 'selectArticle[]'.

What changes do i do to the above script to make it monitor only these checkboxes. Also is it possible to modify the above script to actually fetch the value of the checbox checked.

Can someone modify the above script for me please...thanks!

Upvotes: 0

Views: 724

Answers (4)

user1116151
user1116151

Reputation:

$("input[name='checkbox-name']:checked").length

where checkbox-name : is the name of the checkbox list

Upvotes: 0

Tim
Tim

Reputation: 9489

Instead of doing

$("input:checked").length;

you can do 

$("input[name='selectArticle[]']:checked").length;

the attribute [name=certainname] is known to cause some delay in your code. Better is to give all your checkboxes you need a certain class and then do something like:

<script>
function countChecked() {
  var n = $("input.classname:checked").length;
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}
countChecked();
$(".classname:checked").click(countChecked);
</script>

EDIT

If you want to use the value you can do something like: 

<script>
function alertValues() {
  $("input.classname:checked").each(function() {
        alert($(this).val());
  }
}
alertValues();
</script>

If you now call alertValues() it will alert all values for the checked boxes.

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816262

Filter by attribute [docs]. I think your code is actually not correct, you bind the event handler only to the elements that are already selected. If you want to bind it to all checkboxes of this group, select all of them:

var $checkboxes = $("input[name='selectArticle[]']");

function countChecked() {
  var n = $checkboxes.filter(":checked").length;
  $("div").text(n + (n <= 1 ? " is" : " are") + " checked!");
}

$checkboxes.change(countChecked).change();

Caching the elements ($checkboxes) is better than searching for them on each invocation of the handler.

If you really want to bind the handler only the the selected ones, bind the event handler like this:

$("input[name='selectArticle[]']:checked").change(countChecked).change();

It is better to bind the event handler to the change event (selections can also be changed via the keyboard).

You also see that instead of calling countChecked, it trigger the change event manually by calling change after the event handler was bound.

Upvotes: 4

VDVLeon
VDVLeon

Reputation: 1394

Use something like this:

$("input[name='selectArticle[]']:checked")

Upvotes: 0

Related Questions