...

View Full Version : Check/Uncheck all checkboxes with a certain value



guvenck
06-06-2007, 01:07 AM
Hello,

I have a form structure with checkboxes like below, I use this form to manage access rights to certain pages.



<form action="file.php" method="post" name="Permissions">

<table class="list">

<tr>
<th>Page</th>
<th>Guests</th>
<th>Users</th>
<th>Authors</th>
<th>Admins</th>
</tr>

<tr>
<td>Page 1</td>
<td><input type="checkbox" name="1[]" value="1" checked></td>
<td><input type="checkbox" name="1[]" value="10" checked></td>
<td><input type="checkbox" name="1[]" value="100" checked></td>
<td><input type="checkbox" name="1[]" value="1000"></td>
</tr>

<tr>
<td>Page 2</td>
<td><input type="checkbox" name="2[]" value="1" checked></td>
<td><input type="checkbox" name="2[]" value="10" checked></td>
<td><input type="checkbox" name="2[]" value="100" checked></td>
<td><input type="checkbox" name="2[]" value="1000"></td>
</tr>

<tr>
<td>Page 3</td>
<td><input type="checkbox" name="3[]" value="1" checked></td>
<td><input type="checkbox" name="3[]" value="10" checked></td>
<td><input type="checkbox" name="3[]" value="100" checked></td>
<td><input type="checkbox" name="3[]" value="1000"></td>
</tr>

</table>

<input type="submit" name="permissions" value="Send">

</form>



I need a Javascript function (or two) which I will use with onClick handler. This function should Check/Uncheck all checkboxes that have a certain value.

Like:



<a href="#" onClick="CheckAllBoxes(1000);">Check All</a>
<a href="#" onClick="UnCheckAllBoxes(1000);">Check All</a>

should Check/Uncheck all checkboxes with the value 1000.







function CheckAllBoxes(value) {

}

function UnCheckAllBoxes(value) {

}


Can you help me out of here?

Bill Posters
06-06-2007, 08:16 AM
e.g.

function toggleAll(val,checkVal) {

var inputEls = document.getElementsByTagName('input');
for (var i = 0, tEl; tEl = inputEls[i]; i++) {
if (tEl.type == 'checkbox' && tEl.value == val) {
tEl.checked = checkVal;
}
}

}

<ul>
<li><a href="#" onclick="toggleAll(1,'checked');">Check All (1)</a></li>
<li><a href="#" onclick="toggleAll(1,'');">Uncheck All (1)</a></li>
</ul>



<td><input type="checkbox" name="1[]" value="1" checked="checked"></td>


guvenck
06-06-2007, 01:35 PM
Hi Bill, thanks for the help. Meanwhile I wrote the following and it works too.
Can this be done with a single toggle-checkbox at the top of the table column like the ones in Yahoo Mail or Hotmail?



function CheckAll(va) {
count = document.Permissions.elements.length;
for (i=0; i < count; i++) {
if(document.Permissions.elements[i].value == va) {
document.Permissions.elements[i].checked = 1;
}
}
}
function UnCheckAll(va) {
count = document.Permissions.elements.length;
for (i=0; i < count; i++) {
if(document.Permissions.elements[i].value == va) {
document.Permissions.elements[i].checked = 0;
}
}
}





<a href="#" onClick="CheckAll(1);">Check All</a>
<a href="#" onClick="UnCheckAll(1);">Uncheck All</a>


Like



<input type="checkbox" onClick="ToggleAll(1)">

Bill Posters
06-06-2007, 02:25 PM
e.g.

Same js function…

function toggleAll(val,checkVal) {

var inputEls = document.getElementsByTagName('input');
for (var i = 0, tEl; tEl = inputEls[i]; i++) {
if (tEl.type == 'checkbox' && tEl.value == val) {
tEl.checked = checkVal;
}
}

}

Altered event…

<label><input type="checkbox" value="1" checked="checked" onclick="toggleAll(this.value,this.checked);"> 1</label>
<label><input type="checkbox" value="10" checked="checked" onclick="toggleAll(this.value,this.checked);"> 10</label>
<label><input type="checkbox" value="100" checked="checked" onclick="toggleAll(this.value,this.checked);"> 100</label>
<label><input type="checkbox" value="1000" onclick="toggleAll(this.value,this.checked);"> 1000</label>

The use of checked="checked" above is set to match your default settings for each of your sets. Add or remove the checked="checked" atrributes according to your defaults.


Overlooking the use of tables for layouts and one or two other issues…

e.g.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">

function toggleAll(val,checkVal) {

var inputEls = document.getElementsByTagName('input');
for (var i = 0, tEl; tEl = inputEls[i]; i++) {
if (tEl.type == 'checkbox' && tEl.value == val) {
tEl.checked = checkVal;
}
}

}

</script>
</head>
<body>

<form action="file.php" method="post" name="Permissions">
<div>

<table class="list" border="1" cellpadding="5">
<tr>
<th>Page</th>
<th><input type="checkbox" value="1" onclick="toggleAll(this.value,this.checked);" checked="checked"> Guests</th>
<th><input type="checkbox" value="10" onclick="toggleAll(this.value,this.checked);" checked="checked"> Users</th>
<th><input type="checkbox" value="100" onclick="toggleAll(this.value,this.checked);" checked="checked"> Authors</th>
<th><input type="checkbox" value="1000" onclick="toggleAll(this.value,this.checked);"> Admins</th>
</tr>
<tr>
<td>Page 1</td>
<td><input type="checkbox" name="1[]" value="1" checked="checked"></td>
<td><input type="checkbox" name="1[]" value="10" checked="checked"></td>
<td><input type="checkbox" name="1[]" value="100" checked="checked"></td>
<td><input type="checkbox" name="1[]" value="1000"></td>
</tr>
<tr>
<td>Page 2</td>
<td><input type="checkbox" name="2[]" value="1" checked="checked"></td>
<td><input type="checkbox" name="2[]" value="10" checked="checked"></td>
<td><input type="checkbox" name="2[]" value="100" checked="checked"></td>
<td><input type="checkbox" name="2[]" value="1000"></td>
</tr>
<tr>
<td>Page 3</td>
<td><input type="checkbox" name="3[]" value="1" checked="checked"></td>
<td><input type="checkbox" name="3[]" value="10" checked="checked"></td>
<td><input type="checkbox" name="3[]" value="100" checked="checked"></td>
<td><input type="checkbox" name="3[]" value="1000"></td>
</tr>
</table>

<input type="submit" name="permissions" value="Send">

</div>
</form>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum