iterate checkbox javascript?

Question

I have a function for select/check all checkbox that id=hap

$(function () {
       $('#select-all').click(function (event) {

           var selected = this.checked;
           
           $('#hap').each(function () {    this.checked = selected; });

       });
    });

This is my checkbox to select all.

<input type='checkbox' id='select-all'><label for='select-all'>Delete all</label>

And I use it for select data that I've fetched by php

$data=mysql_query("SELECT*FROM comment where news_id='$id'");
    $x=0;
    while($a=mysql_fetch_array($data)){
                                        
    $x++;
    echo"

<td class='center'>
    <input id='hap' type='checkbox' name='c_$x' value='$a[comment_id]'>
</td>";

}

But it just select/check one data in the first loop, another data isn't selected.

Anyone know what's wrong with it?

Please use PDO or MySQLi instead of the old mysql_* functions, because it's depreciated. — Subin
– Subin, Commented Jan 8, 2014 at 15:39

Styphon · Accepted Answer · 2014-01-08 15:39:42Z

3

ID's are unique. If you have more than one ID on a page it will only use the first. If you need more than one of something on a page you need to use Class instead.

answered Jan 8, 2014 at 15:39

Styphon

10.5k9 gold badges54 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kumar V · Accepted Answer · 2014-01-08 15:44:15Z

0

Try this code. Change id to class

 echo"

<td class='center'>
    <input class='hap' type='checkbox' name='c_$x' value='$a[comment_id]'>
</td>";

In js

$(function () {
       $('#select-all').click(function (event) {

           if($(this).is(':checked')) {
        $(".hap").attr('checked', 'checked');
    } else {
        $(".hap").removeAttr('checked');
    }


});

answered Jan 8, 2014 at 15:44

Kumar V

8,8289 gold badges44 silver badges60 bronze badges

1 Comment

Frogmouth Over a year ago

may you consider to use .prop() instead .attr() (if jq version is 1.6+) api.jquery.com/prop

Pelo8888 · Accepted Answer · 2014-01-08 15:48:52Z

0

Try this:

function actualizarSeleccion(){
   $('.hap').each(function () {    
       this.checked = document.getElementById("select-all").checked;; 
   });
}    

<input type='checkbox' id='select-all' onchange="actualizarSeleccion()"><label for='select-all'>Delete all</label>

answered Jan 8, 2014 at 15:48

Pelo8888

615 bronze badges

Comments

Frogmouth · Accepted Answer · 2014-01-08 16:03:33Z

0

Maybe you like this way:

$(function () {
     $('#select-all').click(function() {
          $(".hap").prop("checked", this.checked);
     });
});

without set a useless variables
without use each method (instead use prop in jquery collection of object)

answered Jan 8, 2014 at 16:03

Frogmouth

1,8161 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

iterate checkbox javascript?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related