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:checke开发者_如何学JAVAd").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!

---

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.

---

Use something like this:

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

---

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.

---

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

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