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
– James Montagne, Commented Sep 26, 2013 at 3:47
possible duplicate of: stackoverflow.com/questions/386281/… — user2663434
– user2663434, Commented Sep 26, 2013 at 3:49
can you show us what's the content of that 'source' being passed in your function. — eggshot
– eggshot, Commented Sep 26, 2013 at 3:58

Zack Newsham · Accepted Answer · 2013-09-26 03:48:48Z

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, 2013 at 3:48

Zack Newsham

3,0022 gold badges27 silver badges45 bronze badges

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

3 Comments

Alex Over a year ago

I use [] but it's not checked all checkboxes.

Zack Newsham Over a year ago

I'd also change your for loop to this: for(var i=0, i<checkboxes.length;i++) then as the answer below states, your tying to get the checked state of an event - not of the source (the argument passed to your event handler is an event)

Zack Newsham Over a year ago

If you're still stuck - update your question with the current code that isnt working.

kyungwook · Accepted Answer · 2013-09-26 03:54:35Z

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, 2013 at 3:54

kyungwook

111 bronze badge

3 Comments

RobG Over a year ago

Safety? How is that "safer"?

Zack Newsham Over a year ago

@RobG I think he is referring to the fact that evt may not be set in some browsers

RobG Over a year ago

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.

Michael Petrotta · Accepted Answer · 2013-09-26 04:50:10Z

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, 2013 at 4:50

Michael Petrotta

61.1k27 gold badges153 silver badges181 bronze badges

answered Sep 26, 2013 at 4:22

joy

1

Comments

RobG · Accepted Answer · 2013-09-26 04:50:34Z

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, 2013 at 4:50

RobG

148k32 gold badges180 silver badges216 bronze badges

answered Sep 26, 2013 at 4:30

joy

1

1 Comment

RobG Over a year ago

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.

Collectives™ on Stack Overflow

Select checkbox is not working with javascript

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related