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


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
viewtopic.php?t=37259

searching helps ;) :P

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. :lol:

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

      }
   }
}

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