CODEWITHSUNDEEP
javascriptjquerydom
user1768830
user1768830

Reputation:

How to obtain and then iterate an array of checkboxes in jQuery?

I have a table that has 8 columns in it. The last column has a <th> header of Refactor? and simply displays a checkbox for each row in the table. If the user wants to Refactor a particular record in the table, they check the row's Refactor? checkbox and then submit the the form.

I am trying to implement a "Check All" checkbox above the table whereby the user clicks the "Check All" checkbox, and every row in the table gets its Refactor? checkbox checked. I am trying to achieve this in jQuery, and have gotten this far:

$("#checkAll").click(function() {
    alert("Check All has been checked!");

    var checkboxArray = null;
    $.each(checkboxArray, function(key, value) {
        $(key).prop("checked", true);
    });
});

Obviously, this doesn't work, however when I comment-out everything underneath the alert I can successfully get the alert dialog popping up when I click the "Check All" checkbox, so I've gotten that far.

I'm trying to obtain an array (checkboxArray) of all the Refactor? checkboxes in the table. Once I have that array, I just need a way to iterate through each checkbox and set its checked property to true. But I'm having a tough time connecting the dots here. Thanks in advance!

Upvotes: 0

Views: 135

Answers (6)

Sushanth --
Sushanth --

Reputation: 55750

$("#checkAll").click(function() {
    alert("Check All has been checked!");

    $('input[type="checkbox"]').not($(this)).prop('checked' , this.checked);
});

If these are the only checkboxes in your page then you can use the above method. No need of iterating in the first place..

$("#checkAll").click(function() {
      alert("Check All has been checked!");

      $('tbody input[type="checkbox"]').not($(this)).prop('checked' , this.checked);
 });

Upvotes: 0

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50573

Given that they are in the 8th column, you can do it as follows:

$("#checkAll").click(function() {
    alert("Check All has been checked!");

    $('#yourtable td:nth-child(8) :checkbox').each(function() {
         $(this).prop("checked", true);
    });
});

See working demo

Upvotes: 0

Jezen Thomas
Jezen Thomas

Reputation: 13800

I'm not sure why you're trying to put them in an array first.

This works for me:

$('#checkall').click(function(){
    $('input[type="checkbox"]').prop('checked', true);
});

​

Upvotes: 0

Bot
Bot

Reputation: 11855

There are 2 approaches, you can check ALL checkboxes

$('input[type=checkbox]').prop('checked', true);

or you can give those refactor boxes a class and only check those

$('.refactorClass').prop('checked', true);

Upvotes: 1

Dominic Green
Dominic Green

Reputation: 10258

This would be alot cleaner if you add a class to all your checkbox's like selection then you can do 

$("#checkAll").click(function() {
   $(".seleciton").attr("checked", true);
});

Upvotes: 0

I Hate Lazy
I Hate Lazy

Reputation: 48761

Just select the :checkbox of all th:last-child in the table, and use .prop().

$("#checkAll").click(function() {
    alert("Check All has been checked!");

    $("#myTable th:last-child :checkbox").prop("checked",true);
});

DEMO: http://jsfiddle.net/9BRA3/

Upvotes: 0

Related Questions