Select All, Select None :: Checkboxes

@The_Little_GuyMar 18.2006

I have two links at the moment, and one says ~~[B]~~All[/B] and the other says ~~[B]~~None[/B].

I would like to be able to click on ~~[B]~~All[/B], and it will select all the check boxes. I would like to then be able to click on ~~[B]~~None[/B], and it will deselect all the boxes.

Any Help On This Topic?

to post a comment

JavaScript

19 Comments(s) _↴

@phpnoviceMar 18.2006 — #Loop through the FORM [b]elements[/b] collection. When you find an [b][I]element[/I].type[/b] that is equal to "checkbox" then you can set [B][I]element[/I].checked[/B] to either [B]true[/B] or [B]false[/B] as desired.

@The_Little_GuyauthorMar 18.2006 — #huh? I don't know any Javascript, but I did find this script:

[CODE]<SCRIPT type="text/JavaScript">
 var checkflag = "false";
 function check(field) {
 if (checkflag == "false") {
 for (i = 0; i < field.length; i++) {
 field[i].checked = true;}
 checkflag = "true";
 return "None"; }
 else {
 for (i = 0; i < field.length; i++) {
 field[i].checked = false; }
 checkflag = "false";
 return "All"; }
 }
 //  End -->
 </script>[/CODE]

[code=html]
 <input type=button value='All' onClick='this.value=check(this.form.list)'>[/code]

Could you help me modify it, so it is not a button, but text?

@phpnoviceMar 18.2006 — #How about a better script -- especially since that one won't check *all* checkboxes in your form?

<i>
 </i>function allCheckboxes(f, opt) {
 with (f) {
 var x, len = elements.length;
 for (x=0; x&lt;len; ++x) {
 if (elements[x].type == "checkbox") {
 elements[x].checked = opt;
 }
 }
 }
 return false;
 }

And for your links:

<a href="javascript:void(0)" onclick="return allCheckboxes(document.formName, true)">All</a>

<a href="javascript:void(0)" onclick="return allCheckboxes(document.formName, false)">None</a>

@The_Little_GuyauthorMar 18.2006 — #hmmm, that didn't work, Here is what I have from the start of the script to the end of the table:

[code=php]<SCRIPT type="text/JavaScript">
 function allCheckboxes(f, opt) {
 with (f) {
 var x, len = elements.length;
 for (x=0; x<len; ++x) {
 if (elements[x].type == "checkbox") {
 elements[x].checked = opt;
 }
 }
 }
 return true;
 }
 </script>
 
 <?php
 
 $rows = mysql_num_rows($result);
 //Start the table
 echo "<table align='center' width='50%' border='1' cellspacing='5' cellpadding='0'>n";
 
 echo "<tr><td colspan='3'><input type='submit' value='Delete Selected'>n
 </td>n
 </tr>n";
 //The Two Links
 echo '<tr><td colspan="3">Select: <a href="javascript:void(0)" onclick="return allCheckboxes(document.formName, true)">All</a>
 <a href="javascript:void(0)" onclick="return allCheckboxes(document.formName, false)">None</a> </td></tr>';
 
 // loop to create table
 for ($r = 1; $r <= $rows; $r++) {
 echo "<tr>n";
 // loop to create table columns
 echo "<td width='20px'><input type='checkbox' name='formName' value='". $username = mysql_result($result, $r-1, 1) ."'></td>n";
 for ($c = 1; $c <= mysql_num_fields($result);$c++) {
 echo "<td>". mysql_result($result, $r-1, $c-1) ."</td>n";
 }   echo "</tr>n";
 }
 echo "<tr><td colspan='3'><input type='submit' value='Delete Selected'>n
 </form>n
 </td>n
 </tr>n
 </table>n";
 } [/code]

Sorry its kind of messy, but that is what it looks like, am I doing it right?

@phpnoviceMar 18.2006 — #Where's your FORM? [b]formName[/b] is supposed to reference the [b]name[/b] attribute value of your FORM tag.

@The_Little_GuyauthorMar 18.2006 — #

[code=php]</script>
 
 <?php
 //echo "<table width ='50%' border = '1' cellspacing = '5' cellpadding = '0'>";
 //$columns = 3;
 $rows = mysql_num_rows($result);
 echo "<table align='center' width='50%' border='1' cellspacing='5' cellpadding='0'>n";
 // set variables from form input
 //$rows = $_POST['rows'];
 //$columns = $_POST['columns'];
 // loop to create rows
 echo "<tr><td colspan='3'><input type='submit' value='Delete Selected'>n
 </td>n
 </tr>n";
 echo '<tr><td colspan="3">Select: <a href="javascript:void(0)" onclick="return allCheckboxes(document.formName, true)">All</a>
 <a href="javascript:void(0)" onclick="return allCheckboxes(document.formName, false)">None</a> </td></tr>';
 //The form
 echo '<form name="formName" method="post" action="deletedir.php">';
 
  for ($r = 1+1; $r <= $rows; $r++) {
   echo "<tr>n";
   // loop to create columns
   echo "<td width='20px'><input type='checkbox' name='formName' value='". $username = mysql_result($result, $r-1, 1) ."'></td>n";
   for ($c = 1; $c <= mysql_num_fields($result);$c++) {
   echo "<td>". mysql_result($result, $r-1, $c-1) ."</td>n";
   }   echo "</tr>n";
  }
  echo "<tr><td colspan='3'><input type='submit' value='Delete Selected'>n
 </form>n
 </td>n
 </tr>n
 </table>n";
 } 
 else{
 
 //the session variable isn't registered, send them back to the login page
 header( "Location: http://www.d-top.org/catolog/login.php" );
 }
 
 ?>[/code]

If you are saying like this, it doesn't work

@phpnoviceMar 18.2006 — #If you are saying like this, it doesn't work[/QUOTE]
At least partially, this is because you left an error in your coding:

<input type='checkbox' name='[COLOR=Red]formName[/COLOR]' ...

@The_Little_GuyauthorMar 18.2006 — #what is wrong with that?

@phpnoviceMar 18.2006 — #[b]formName[/b] is supposed to reference the [b]name[/b] attribute value of your FORM tag.[/QUOTE]
The FORM name must be unique, too.

@The_Little_GuyauthorMar 18.2006 — #<a href="javascript:void(0)" onclick="return allCheckboxes(document.list, true)">All</a>

<a href="javascript:void(0)" onclick="return allCheckboxes(document.list, false)">None</a>

<form name="list" method="post" action="deletedir.php">

Like this?

@phpnoviceMar 18.2006 — #Yep, that's fine. So, does it work now?

@The_Little_GuyauthorMar 18.2006 — #no

@phpnoviceMar 18.2006 — #Try moving your opening FORM tag to before the opening of the TABLE and the closing FORM tag to after the closing of the TABLE. After that, if it still doesn't work, then I'd need a live link to your page on the Internet so that I can see how the HTML is coming to the client.

@The_Little_GuyauthorMar 18.2006 — #not sure if you will be able to access it, but here is the link:

http://www.d-top.org/catolog/session/delete.php

@phpnoviceMar 18.2006 — #I'm getting a login form. This form is probably a redirect as a result of PHP code in your [b]delete.php[/b] page. Can you temporarily comment out that code so I can view your [b]delete.php[/b] HTML?

@phpnoviceMar 18.2006 — #Your other choice is to execute the page yourself and then copy the HTML from the browser's view and paste that on this forum.

@The_Little_GuyauthorMar 18.2006 — #

[code=html]<h2>Delete a Session</h2>
 <form method="post" action="deletedir.php">
 <SCRIPT type="text/JavaScript">
 function allCheckboxes(f, opt) {
 with (f) {
 var x, len = elements.length;
 for (x=0; x<len; ++x) {
 if (elements[x].type == "checkbox") {
 elements[x].checked = opt;
 }
 }
 }
 return true;
 }
 </script>
 
 Click <a href="../checkLogin.php">here</a> to go back to the admin section.<form name="list" method="post" action="deletedir.php">
 <table border='0' cellspacing='0' cellpadding='0'><tr><td bgcolor='#00AA33'>
 <table align='left' border='0' cellspacing='1' cellpadding='3'>
 <tr><td colspan='3' bgcolor='#FFFFFF'><input type='submit' value='Delete Selected'>
 
 </td>
 
 </tr>
 <tr><th bgcolor="#FFFFFF">Select: <a href="javascript:void(0)" onclick="return allCheckboxes(document.list, true)">All</a>
 <a href="javascript:void(0)" onclick="return allCheckboxes(document.list, false)">None</a></th>
 <th bgcolor="#FFFFFF">User Name</th>
 <th bgcolor="#FFFFFF">User ID</th>
 </tr><tr>
 <td width="20" bgcolor="#FFFFFF"><input type="checkbox" name="formName" value="8"></td><td bgcolor='#FFFFFF'>rat</td>
 <td bgcolor='#FFFFFF'>8</td>
 </tr>
 <tr>
 
 <td width="20" bgcolor="#FFFFFF"><input type="checkbox" name="formName" value="9"></td><td bgcolor='#FFFFFF'>ted</td>
 <td bgcolor='#FFFFFF'>9</td>
 </tr>
 <tr><td colspan='3' bgcolor='#FFFFFF'><input type='submit' value='Delete Selected'>
 
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
 </form>
 Click <a href='../checkLogin.php'>here</a> to go back to the admin section.[/code]

@The_Little_GuyauthorMar 18.2006 — #I noticed that I had two form open tags, I deleted one, and now it works. Thanks so much for your patience, the help with the code, and for the code.

@phpnoviceMar 18.2006 — #Excellent! I knew it had to be something simple.

Cheers.

Also in #JavaScript _↴

cell rollovers Saving Form Values To A File dynamic menu, value but no text

Success!

Help @The_Little_Guy spread the word by sharing this article on Twitter...

Tweet This

Select All, Select None :: Checkboxes

19 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Select All, Select None :: Checkboxes

19 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #JavaScript _↴