We help IT Professionals succeed at work.

Select all checkboxes in coldfusion form

Robcarter10
Robcarter10 asked
on
I have a cfform with 26 check boxes.  The user has asked me to place in a button that will allow them to check all check boxes with one click. I have found ways to do this with javascript if all the check boxes are named the same name. However, in this form, all the boxes already have different names. Is there a way to accomplish this.
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Give them all a sequential "id"

         <input type="checkbox" id="myBox1" ....>
         <input type="checkbox" id="myBox2" ....>
         <input type="checkbox" id="myBox3" ....>
         <input type="checkbox" id="myBox4" ....>
         ...
         <input type="checkbox" id="myBox26" ....>

Then have a javascript function that loops from 1 to the max number, grabs each checkbox and updates it's state.  To make it more flexible, pass in a boolean value  IsChecked. If it's true all the boxes will be checked. If false, they'll be unchecked.  Then you can have a checkAll/uncheckAll button. Untested, but something like this

     
               function toggleCheckboxes(maxNumber, isChecked) {
                     for (var i = 1; i <= maxNumber; i++;) {
                          var box = document.getElementById("myBox"+ i);
                          box.checked = isChecked;
                     }
                }

You could call it onclick

           <input type="button" value="Check All" onClick="toggleCheckboxes(26, true)">
           <input type="button" value="Uncheck All" onClick="toggleCheckboxes(26, false)">
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
Correction, the js function should be:

<script type="text/javascript">
    function toggleCheckboxes(maxNumber, isChecked) {
         for (var i = 1; i <= maxNumber; i++) {
             var box = document.getElementById("myBox"+ i);
             box.checked = isChecked;
         }
    }
</script>

Open in new window

CERTIFIED EXPERT

Commented:
try this code

<script>
// JavaScript Document
function checkboxes(theElement) {
var theForm = theElement.form, z = 0;
for(z=0; z<theForm.length;z++){
if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){
theForm[z].checked = theElement.checked;
}
}
}
</script>

Open in new window


Code for HTML
<input type="checkbox" name="checkall" onClick="checkboxes(this);" class="inputstyle" /> Check All/Uncheck All

Open in new window


CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
> if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){

To make it totally dynamic, use theElement.name instead of "checkall".

Just be aware that will select ALL other checkboxes. So if your form contains any checkboxes not part of that one group, they will be updated too.  That's not always desirable.  To avoid that either use sequential id's OR even better, use jquery  Check All Checkboxes with JQuery

CERTIFIED EXPERT

Commented:
well, agx, you are right, but in his original question he only wants to select all whatever displayed on the page

point 2. i do not see anything wrong in using "checkall". eventhough i name my chekboxes like abc, it selects them, no matter what cuold be the issue
CERTIFIED EXPERT
Most Valuable Expert 2015

Commented:
> i do not see anything wrong in using "checkall"

Nothing wrong w/it :) Just the rest of it is completely dynamic except that one piece.  Changing that one piece would make it perfect - 100% dynamic and reusable anywhere!

> but in his original question he only wants to select all whatever displayed on the page

It was implied, but he didn't say that exactly. So it's good to know the side effects, just in case.

CERTIFIED EXPERT
Most Valuable Expert 2015
Commented:
@myselfrandhawa -  Here's an adaptation. See how it's now totally dynamic and modular?  Just plug it into a form and it works. No worrying about the "name" of the parent check box.

<script type="text/javascript">
function toggleAllCheckboxes(parentBox) {
	var inputElements = parentBox.form.getElementsByTagName("input");
	for(var x = 0; x < inputElements.length; x++){
		var elem = inputElements[x];
		if (elem.type == 'checkbox' && elem != parentBox){
			elem.checked = parentBox.checked;
		}
	}
}
</script>

<form>
	<input type="checkbox" name="yah" onClick="toggleAllCheckboxes(this)">check all<hr>
	<input type="checkbox" name="a" value="a">
	<input type="checkbox" name="b" value="b">
	<input type="checkbox" name="box123" value="box123">
	<input type="checkbox" name="foo" value="foo">
	<input type="checkbox" name="bar" value="bar">
	<input type="checkbox" name="yah" value="bar">
</form>

Open in new window

CERTIFIED EXPERT

Commented:
Hey agx, Great Work Mate

Author

Commented:
Thanks agx! That worked perfectly.