Page 1 of 2
How to: uncheck/check lots of checkboxes at once
Posted: Mon Sep 12, 2005 8:57 am
by pilau
The title says it all...
I've been researching for it today, but it seems that not even one person in this world could make a descent explanation about how to do such a thing!
Kind of gets you irritated.
Maybe someone in here could help me out.
TIA
Posted: Mon Sep 12, 2005 9:18 am
by shiznatix
Code: Select all
function check_all()
{
for(var i=0;i<document.forms[0].elements.length;i++)
{
if(document.forms[0].elements[i].type=="checkbox")
{
document.forms[0].elements[i].checked=true;
}
}
}
function uncheck_all()
{
for(var i=0;i<document.forms[0].elements.length;i++)
{
if(document.forms[0].elements[i].type=="checkbox")
{
document.forms[0].elements[i].checked=false;
}
}
}
function invert_check()
{
for(var i=0;i<document.forms[0].elements.length;i++)
{
if(document.forms[0].elements[i].type=="checkbox")
{
if (document.forms[0].elements[i].checked==true)
{
document.forms[0].elements[i].checked=false;
}
else if (document.forms[0].elements[i].checked==false)
{
document.forms[0].elements[i].checked=true;
}
}
}
}
Posted: Mon Sep 12, 2005 9:18 am
by neophyte
I've got no clue my self but here is how PMA does it:
Hope that helps....
Code: Select all
In the link tag:
onclick="setCheckboxesRange('rowsDeleteForm', true, 'id_rows_to_delete', 0, '30'); return false;"
function librarry:
/**
* Checks/unchecks all rows
*
* @param string the form name
* @param boolean whether to check or to uncheck the element
* @param string basename of the element
* @param integer min element count
* @param integer max element count
*
* @return boolean always true
*/
// modified 2004-05-08 by Michael Keck <mail_at_michaelkeck_dot_de>
// - set the other checkboxes (if available) too
function setCheckboxesRange(the_form, do_check, basename, min, max)
{
for (var i = min; i < max; i++) {
if (typeof(document.forms[the_form].elements[basename + i]) != 'undefined') {
document.forms[the_form].elements[basename + i].checked = do_check;
}
if (typeof(document.forms[the_form].elements[basename + i + 'r']) != 'undefined') {
document.forms[the_form].elements[basename + i + 'r'].checked = do_check;
}
}
return true;
} // end of the 'setCheckboxesRange()' function
// added 2004-05-08 by Michael Keck <mail_at_michaelkeck_dot_de>
// copy the checked from left to right or from right to left
// so it's easier for users to see, if $cfg['ModifyAtRight']=true, what they've checked ;)
function copyCheckboxesRange(the_form, the_name, the_clicked)
{
if (typeof(document.forms[the_form].elements[the_name]) != 'undefined' && typeof(document.forms[the_form].elements[the_name + 'r']) != 'undefined') {
if (the_clicked !== 'r') {
if (document.forms[the_form].elements[the_name].checked == true) {
document.forms[the_form].elements[the_name + 'r'].checked = true;
}else {
document.forms[the_form].elements[the_name + 'r'].checked = false;
}
} else if (the_clicked == 'r') {
if (document.forms[the_form].elements[the_name + 'r'].checked == true) {
document.forms[the_form].elements[the_name].checked = true;
}else {
document.forms[the_form].elements[the_name].checked = false;
}
}
}
}
// added 2004-05-08 by Michael Keck <mail_at_michaelkeck_dot_de>
// - this was directly written to each td, so why not a function ;)
// setCheckboxColumn(\'id_rows_to_delete' . $row_no . ''\');
function setCheckboxColumn(theCheckbox){
if (document.getElementById(theCheckbox)) {
document.getElementById(theCheckbox).checked = (document.getElementById(theCheckbox).checked ? false : true);
if (document.getElementById(theCheckbox + 'r')) {
document.getElementById(theCheckbox + 'r').checked = document.getElementById(theCheckbox).checked;
}
} else {
if (document.getElementById(theCheckbox + 'r')) {
document.getElementById(theCheckbox + 'r').checked = (document.getElementById(theCheckbox +'r').checked ? false : true);
if (document.getElementById(theCheckbox)) {
document.getElementById(theCheckbox).checked = document.getElementById(theCheckbox + 'r').checked;
}
}
}
Posted: Mon Sep 12, 2005 9:19 am
by feyd
Posted: Mon Sep 12, 2005 9:19 am
by patrikG
Javascript:
Code: Select all
function selectAll(form_name,element_name){
var check = document.forms[form_name].elements[element_name];
var count_check = check.length;
for(i=0;i<count_check;i++){
check[i].checked = true;
}
}
Posted: Mon Sep 12, 2005 9:20 am
by patrikG
wooooha! Now that's the kind of response that should everyone asking a question here feel very warm and fuzzy inside. Four replies within 2 minutes.

Posted: Mon Sep 12, 2005 9:28 am
by feyd
hehe, nice... pi-rate's be lookin' fur thur grog they be.
Posted: Mon Sep 12, 2005 9:32 am
by patrikG
Aye! matey, dar bounty is them smartly lubber posters. Har!
Posted: Mon Sep 12, 2005 11:27 am
by pilau
Your attention please.
It's long but please read it.
The checkbox I have marked should call the "invert_check" function, which should ivert the status of the checkbox (checked, unchecked).
However, it is not working. Something is wrong. I can't tell if it's a JavaScript error because I am working with FireFox and FF won't tell you if you have errors in your JS.
Code: Select all
<html>
<head>
<title>Form</title>
<script src="calendar.js"></script>
</head>
<body bgcolor="#000033">
<form name="container" action="dude.php" method="POST">
<input type="hidden" name="do" value="">
<input type="hidden" name="month" value="">
<table width="610" style="background-color: #660000;">
<tr bgcolor="#FFCC00">
<td colspan="2">
<!-- ############################## Checkbox! -->
<input type="checkbox" onClick="invert_check('January')">
<!-- ############################## Checkbox! -->
January <font size="1">(Uncheck to remove events)</font>
</td>
</tr> <tr>
<td bgcolor='#FF9900' width='10'><input type='checkbox' name='January[1]' checked></td>
<td bgcolor='#FFFFCC' width='530' colspan='2'><input type='text' size='1' value='1'> <input type='text' size='50' value='New Year's Day'></td>
</tr>
<tr>
<td bgcolor='#FF9900' width='10'><input type='checkbox' name='January[2]' checked></td>
<td bgcolor='#FFFFCC' width='530' colspan='2'><input type='text' size='1' value='2'> <input type='text' size='50' value='Epiphany'></td>
</tr>
<tr>
<td bgcolor='#FF9900' width='10'><input type='checkbox' name='January[17]' checked></td>
<td bgcolor='#FFFFCC' width='530' colspan='2'><input type='text' size='1' value='17'> <input type='text' size='50' value='Martin Luther King, Jr's Birthday'></td>
</tr>
<tr>
<td bgcolor='#FF9900' width='10'><input type='checkbox' name='January[21]' checked></td>
<td bgcolor='#FFFFCC' width='530' colspan='2'><input type='text' size='1' value='21'> <input type='text' size='50' value='(Eid) al Adha'></td>
</tr>
</table>
<input type="button" value="Apply Changes" onClick="applyChanges()">
</form>
</body>
</html>
Code: Select all
function invert_check(monthname)
{
for(var i=0;i<document.'monthname'.length;i++)
{
if(document.'monthname'[i].type=="checkbox")
{
if (document.'monthname'[i].checked==true)
{
document.'monthname'[i].checked=false;
}
else if (document.'monthname'[i].checked==false)
{
document.'monthname'[i].checked=true;
}
}
}
}
Posted: Mon Sep 12, 2005 11:35 am
by shiznatix
if you are going to be using the invert_check i gave then you don't put in the element name just specify the form that you are going to be using. form[0] would be the first <form></form> on your page, then form[1] would be next and so on so just put in the proper number into the code i gave you and it will work
Posted: Mon Sep 12, 2005 11:45 am
by pilau
The problem is, All the checkboxes are in the same form.
I set them apart into groups 9arrays) which consist of the month name to which the checkboxes belong.
I would like to use your function (or any other function) to change the status of checkboxes that are in an array (I gave an example of the array in the HTML code - January[]).
Posted: Mon Sep 12, 2005 12:29 pm
by patrikG
Pilau wrote:
The checkbox I have marked should call the "invert_check" function, which should ivert the status of the checkbox (checked, unchecked).
However, it is not working. Something is wrong. I can't tell if it's a JavaScript error because I am working with FireFox and FF won't tell you if you have errors in your JS.
Firefox has the most advanced JS debugging. Download the extension "Developer's Toolbar" for Firefox and everything will be dandy.
Posted: Mon Sep 12, 2005 1:49 pm
by pilau
The problem is, All the checkboxes are in the same form.
I set them apart into groups 9arrays) which consist of the month name to which the checkboxes belong.
I would like to use your function (or any other function) to change the status of checkboxes that are in an array (I gave an example of the array in the HTML code - January[]).
Maybe you could say something about that?

Posted: Mon Sep 12, 2005 5:43 pm
by Chris Corbyn
pilau wrote: I can't tell if it's a JavaScript error because I am working with FireFox and FF won't tell you if you have errors in your JS.
Tools -> JavaScript Console
Much better than anything IE has

Posted: Mon Sep 12, 2005 5:53 pm
by Chris Corbyn
Code: Select all
<script type="text/javascript">
<!--
//Checkall
function checkAll(NAME)
{
var inps = document.getElementsByTagName('input');
for (var x in inps)
{
if (inps[x].type == 'checkbox' && inps[x].name == NAME) inps[x].checked = true;
}
}
//Uncheckall
function uncheckAll(NAME)
{
var inps = document.getElementsByTagName('input');
for (var x in inps)
{
if (inps[x].type == 'checkbox' && inps[x].name == NAME) inps[x].checked = false;
}
}
// -->
</script>
<form>
<input type="checkbox" name="foo[]"> Foo<br />
<input type="checkbox" name="foo[]"> Foo<br />
<input type="checkbox" name="foo[]"> Foo<br />
<input type="checkbox" name="bar[]"> Bar<br />
<input type="checkbox" name="bar[]"> Bar<br />
<input type="checkbox" name="bar[]"> Bar<br />
</form>
<a href="javascript:checkAll('foo[]')">Chk Foo</a><br />
<a href="javascript:uncheckAll('foo[]')">UnChk Foo</a><br />
<a href="javascript:checkAll('bar[]')">Chk Bar</a><br />
<a href="javascript:uncheckAll('bar[]')">UnChk Bar</a><br />
Works perfectly in FF but I didn't test in IE so I can't promise that
