• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 172
  • 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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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