Select checkbox is not working with javascript

Question

I've a html checkbox which select all checkbox after click. But unfortunately it's not working. What's the problem in here ?

javascript Code:

<script language="JavaScript">
function toggle(source) {
 checkboxes = document.getElementsByName('contact_no');
  for(var i=0, n=checkboxes.length;i<n;i++) {
  checkboxes[i].checked = source.checked;
  }
}</script>

Php code:

echo "<table width='100%' cellpadding='0' cellspacing='0'>";
echo "<tr>";
echo "<td class='tdhead' valign='top' width='100'><b>Contact Name</b></td>";    
echo "<td class='tdhead' valign='top' width='100'><b>Contact 
Number</b>";                
echo '<input type="checkbox" onClick="toggle(this)" /> Toggle 
All<br/>';              
echo "</tr>";


while($row = mysqli_fetch_array($result))
{  
  $gid = $row['gid'];
  $contact_name = $row['contact_name'];  
  $contact_no =  $row['contact_no'];
  echo "<tr>";              
  echo "<td class='tdhead2' valign='top'>$contact_name</td>";
  echo "<td class='tdhead2' ><input type='checkbox' value='$gid' name='contact_no[]'' 
  />&nbsp;&nbsp;$contact_no</td>";                  
  echo "</tr>";
}

echo "</table>";

You should include your rendered html and not your php code as this question appears to be client side and unrelated to the php code. Also, what about this doesn't work? Do you get errors on the console, does it just do nothing? — James Montagne, Sep 26 '13 at 03:47
possible duplicate of: http://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html — , Sep 26 '13 at 03:49
can you show us what's the content of that 'source' being passed in your function. — eggshot, Sep 26 '13 at 03:58
Another thing, why are you using name as an identifier? Should use class instead, it's more effecient I think. — eggshot, Sep 26 '13 at 04:01
Have you checked each check boxes with their corresponding attributes, especially the name? — eggshot, Sep 26 '13 at 04:08
If the checkboxes are in a form, instead of *getElementsByName* you could use `source.form['contact_no[]']`. — RobG, Sep 26 '13 at 04:13

score 2 · Accepted Answer · answered Sep 26 '13 at 03:48

2

The name on each of your elements is: contact_no[] but in your JS code, you getElementsByName('contact_no') - add [] to the getElementsByName call.

answered Sep 26 '13 at 03:48

Zack Newsham

2,810
1
23
43

I use [] but it's not checked all checkboxes. – Alex Sep 26 '13 at 03:59
I'd also change your for loop to this: `for(var i=0, i – Zack Newsham Sep 26 '13 at 03:59
If you're still stuck - update your question with the current code that isnt working. – Zack Newsham Sep 26 '13 at 04:17

score 1 · Answer 2 · answered Sep 26 '13 at 03:54

1

for a safety, you should handle event object like code below

<script type="text/javascript">
function toggle(evt) {
 evt = window.event || evt;
 var source = evt.srcElement || evt.currentTarget 

 checkboxes = document.getElementsByName('contact_no');
  for(var i=0, n=checkboxes.length;i<n;i++) {
  checkboxes[i].checked = source.checked;
  }
}
</script>

answered Sep 26 '13 at 03:54

kyungwook

11
1

Safety? How is that "safer"? – RobG Sep 26 '13 at 04:11
@RobG I think he is referring to the fact that `evt` may not be set in some browsers – Zack Newsham Sep 26 '13 at 04:18
The OP doesn't use an event object, and if it did, it could just pass it: `toggle(event)`. I don't see how that's better (or safer) than passing *this*. – RobG Sep 26 '13 at 04:38

score 0 · Answer 3 · edited Sep 26 '13 at 04:50

0

<script language="JavaScript">
    function toggle(source)
    {
        checkboxes = document.getElementsByName('contact_no');
        for(var i=0, n=checkboxes.length;i<n;i++)
        {
            contact_no[i].checked = source.checked;
        }
    }
</script>

edited Sep 26 '13 at 04:50

Michael Petrotta

59,888
27
145
179

answered Sep 26 '13 at 04:22

joy

1

score 0 · Answer 4 · edited Sep 26 '13 at 04:50

0

One another solution, you can add Id attribute on the main check box from which you want to perform select all action and make the same as class attribute of other check boxes.

E.g.

$(document).ready(function(){
  $('.selectall').change(function({
    var id = $(this).attr('id');

    if ($(this)is(":checked")) {
      $("." + id).attr('checked','checked');

    } else {
      $("." + id).attr('checked','');
    }
  }))
})

I hope this code helps you

edited Sep 26 '13 at 04:50

RobG

142,382
31
172
209

answered Sep 26 '13 at 04:30

joy

1

There is no jQuery tag. There is no need for an ID. That is very ordinary jQuery—it should use the *prop* method and set the value to a Boolean. – RobG Sep 26 '13 at 04:48

Select checkbox is not working with javascript

4 Answers4