Quickly created this page should do what you are after I had to add a div around the checkboxes so that I could reference the them from javascript and so that I could create the link to select all. I have used javascript to create the link so that there is not a useless link on the page if javascript is disabled.
Hope this helps
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Text Page</title>
</head>
<body>
<div id="options">
<label><input type="checkbox" name="box[]">box label<label><br />
<label><input type="checkbox" name="box[]">box label<label><br />
<label><input type="checkbox" name="box[]">box label<label><br />
<label><input type="checkbox" name="box[]">box label<label><br />
<label><input type="checkbox" name="box[]">box label<label><br />
<label><input type="checkbox" name="box[]">box label<label><br />
<label><input type="checkbox" name="box[]">box label<label><br />
</div>
<script type="text/javascript" charset="utf-8">
var selectAll = function(){
//default link text
var defaultText = 'Select All'
var altText = 'Un-Select All'
//function to change state off checkboxes
function change(){
var inputs = document.getElementById('options').getElementsByTagName('input');
var link = document.getElementById('selectAll')
for(var i=0;i<inputs.length;i++){
if(inputs[i].type == 'checkbox'){
if(inputs[i].checked == true){
inputs[i].checked = false;
link.innerHTML = altText;
}else{
inputs[i].checked = true;
link.innerHTML = defaultText;
}
}
}
}
//function to add the select all link
function addLink(){
var options = document.getElementById('options');
var a = document.createElement('a');
a.setAttribute('href', '#');
a.setAttribute('id', 'selectAll');
var txt = document.createTextNode(defaultText);
a.appendChild(txt);
a.onclick = change;
options.appendChild(a);
}
return {
init : function(){
addLink();
}
}
}();
window.onload = function(){
selectAll.init();
}
</script>
</body>
</html>
Bookmarks