dynamic form check all 2

simon551 · Jul 23, 2007

Hi, I have a form that lists many records that the user can click and then update records in a database.

I would like to create a 'check all' button kind of like the one below. My problem, though is that the script seems to require the fields to be named a certain way. My programming code requires the fields to be just like this though:

Code:

<input type="checkbox"  name="checked[<?php echo $row_rs1['activityID']; ?>]" value="<?php echo $row_rs1['contractID']; ?>" />

So my question is, in looking at the script below, do you see a way to modify it so that I could use it with an id or class attribute of the checkbox rather than the name or value?
Thanks in advance!
-s

Code:

<!-- TWO STEPS TO INSTALL CHECK ALL:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Modified By:  Steve Robison, Jr. (stevejr@ce.net) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! [URL unfurl="true"]http://javascript.internet.com[/URL] -->

<!-- Begin
var checkflag = "false";
function check(field) {
if (checkflag == "false") {
for (i = 0; i < field.length; i++) {
field[i].checked = true;}
checkflag = "true";
return "Uncheck All"; }
else {
for (i = 0; i < field.length; i++) {
field[i].checked = false; }
checkflag = "false";
return "Check All"; }
}
//  End -->
</script>
</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

<BODY>

<center>
<form name=myform action="" method=post>
<table>
<tr><td>
<b>Your Favorite Scripts & Languages</b><br>
<input type=checkbox name=list value="1">Java<br>
<input type=checkbox name=list value="2">JavaScript<br>
<input type=checkbox name=list value="3">ASP<br>
<input type=checkbox name=list value="4">HTML<br>
<input type=checkbox name=list value="5">SQL<br>
<br>                                                    
<input type=button value="Check All" onClick="this.value=check(this.form.list)"> 
</td></tr>
</table>
</form>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="[URL unfurl="true"]http://javascriptsource.com">The[/URL] JavaScript Source</a></font>
</center><p>

<!-- Script Size:  1.47 KB -->

BabyJeffy · Jul 23, 2007

Well... using this kind of set up doesn't matter about classes etc... it does what it says on the tin... it checks all the checkboxes in the form.

HTML:

<form name="myform" action="" method=post>
...
<input type="button" onclick="checkAll(this.form)" /> 
</form>

The supporting Javascript code could be easily extended to support the changing of the button name, too...

JavaScript:

<script type="text/javascript">
function checkAll(l_oForm) {
  var l_pInputs = l_oForm.getElementsByTagName('INPUT');
  for (var loop=0, max=l_pInputs.length; loop<max; loop++) {
    if (l_pInputs[loop].type == 'checkbox') {
      l_pInputs[loop].checked = 'checked';
    }
  }
}
</script>

Let us know how you get on!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

Sleidia · Jul 23, 2007

Here is a function I made.
It checks/unchecks everything that is inside a FORM or a DIV. You choose.

Code:

function elem_chkbox_multi ( method , this_name , checked_status ) {

// method :  div or form
// this_name : div name or form name depending on method
// checked_status : true or false

    if ( method == 'div' ) {
    
    var this_div = document.getElementById( this_name );
    var elem_num = this_div.getElementsByTagName( 'input' );
    var elem_tot = elem_num.length;
    
    }
    
    if ( method == 'form' ) {
    
    var elem_num = document.forms[this_name].elements;
    var elem_tot = elem_num.length;

    }

var first_chkbox = -1;

    for ( i=0 ; i<elem_tot ; i++ ) {
    
        if ( elem_num[i].getAttribute( 'type' ) == 'checkbox' ) {
        
            if ( first_chkbox < 0 ) first_chkbox = i;
        
            if ( checked_status == null ) {
            
            checked_status = elem_num[first_chkbox].checked;
            
            }
        
        elem_num[i].checked = checked_status;
        
        }

    }

}

simon551 · Jul 23, 2007

BabyJeffy, your code works beautifully! and is so short! very nicely done.

Sleidia, thank you as well although I was unable to get your code to fire. I'm a beginner.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

dynamic form check all 2

simon551

IS-IT--Management

BabyJeffy

Programmer

Sleidia

Technical User

simon551

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor