How to: uncheck/check lots of checkboxes at once

JavaScript and client side scripting.

Moderator: General Moderators

pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

How to: uncheck/check lots of checkboxes at once

Post 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. :roll:


Maybe someone in here could help me out.
TIA
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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;
            }

		}
	}
}
User avatar
neophyte
DevNet Resident
Posts: 1537
Joined: Tue Jan 20, 2004 4:58 pm
Location: Minnesota

Post 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;
            }
        }
    }
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

viewtopic.php?t=37259

searching helps ;) :P
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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;
	}
}
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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. :lol:
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

hehe, nice... pi-rate's be lookin' fur thur grog they be.
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

Aye! matey, dar bounty is them smartly lubber posters. Har!
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post 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'>&nbsp;<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'>&nbsp;<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'>&nbsp;<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'>&nbsp;<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;
            }

      }
   }
}
User avatar
shiznatix
DevNet Master
Posts: 2745
Joined: Tue Dec 28, 2004 5:57 pm
Location: Tallinn, Estonia
Contact:

Post 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
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post 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[]).
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post 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.
pilau
Forum Regular
Posts: 594
Joined: Sat Jul 09, 2005 10:22 am
Location: Israel

Post 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? ;)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ;)
Post Reply