• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 170
  • Last Modified:

Select all / de-select all checkboxes

Hi there,

I am trying to write a simple javascript code for a select all / deselect all checkbox.

I have this script working fine:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<script type="text/javascript">
function toggle(source) {
  checkboxes = document.getElementsByName('delete');
  for(var i in checkboxes)
    checkboxes[i].checked = source.checked;
}
</script>
</head>


<form action="" name="myForm" >

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="delete" > Bar 1<br/>
<input type="checkbox" name="delete" > Bar 2<br/>
<input type="checkbox" name="delete" > Bar 3<br/>
<input type="checkbox" name="delete" > Bar 4<br/>
</form>

Open in new window


However, in my real code the names of the checkbox fields are more like delete[1], delete[2], etc.

so it would need to be

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<script type="text/javascript">
function toggle(source) {
  checkboxes = document.getElementsByName('delete');
  for(var i in checkboxes)
    checkboxes[i].checked = source.checked;
}
</script>
</head>


<form action="" name="myForm" >

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="delete[1]" > Bar 1<br/>
<input type="checkbox" name="delete[2]" > Bar 2<br/>
<input type="checkbox" name="delete[3]" > Bar 3<br/>
<input type="checkbox" name="delete[4]" > Bar 4<br/>
</form>

Open in new window


But, of course, this doesn't work. What would be the best approach to get the code to do what I need it to do? Thanks!
0
maxbook
Asked:
maxbook
  • 3
  • 2
1 Solution
 
strickddCommented:
If you use JQuer, you can select based on regular expressions, control types, or CSS classes. http://api.jquery.com/category/selectors/
0
 
leakim971PluritechnicianCommented:
for example : http://jsfiddle.net/KshnW/
function toggle(source) {
    var checkboxes = document.getElementById("checkboxes").getElementsByTagName('input');
    for(var i=1;i<checkboxes.length;i++)
        //if(checkboxes[i].indexOf("delete[") == 0)
            checkboxes[i].checked = source.checked;
}

Open in new window


0
 
maxbookAuthor Commented:
Thank you for the help! This is very close, the only thing is, it seems to be checking all boxes within the div, whether they have the right name or not. For example, in this code:

<html>
<script type="text/javascript">
function toggle(source) {
    var checkboxes = document.getElementById("checkboxes").getElementsByTagName('input');
    for(var i=1;i<checkboxes.length;i++)
        //if(checkboxes[i].indexOf("delete[") == 0)
            checkboxes[i].checked = source.checked;
}
</script>
</head>

<body>

<form action="" name="myForm" >
<div id="checkboxes">
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
<input type="checkbox" name="delete[1]" > Bar 1<br/>
<input type="checkbox" name="delete[2]" > Bar 2<br/>
<input type="checkbox" name="keep[3]" > Bar 3<br/>
<input type="checkbox" name="delete[4]" > Bar 4<br/>
</div>
</form>

Open in new window


all the boxes get checked, even though the one for Bar 3 has a different name. Any way to fix this?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
leakim971PluritechnicianCommented:
uncomment your line 6...
0
 
leakim971PluritechnicianCommented:
line 6:      
if(checkboxes[i].name.indexOf("delete[") == 0)

Open in new window

0
 
maxbookAuthor Commented:
Brilliant! Thank you, it works perfectly!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now