• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 329
  • Last Modified:

How do I write a JavaScript function that will select/unselect all check-boxes for my php web form

Attached is the function i typically use in my basic web dev to create the select/unselect all check boxes
it works great, but I have an app that allows the user to autogenerate a web for [see image]
I want to add the check/uncheck option for the 1st, 2nd and 5th columns.

The first image show how the page appears, the second image shows how the ids will appear

here is the line in the code that creates the checkbox:
$formHtml .= printCheckbox(FORM_MODE_SUBMIT, $fieldId."-displayatcopyrequest", array(FIELD_DISPLAY_AT_COPY_REQUEST_ENABLED=>""), $field->getDisplayAtCopyRequest(), true, ' &nbsp', "valuetext");

so checkboxes will be

15-displayatcopyrequest
16-displayatcopyrequest
17-displayatcopyrequest

or for another account:
2022-displayatcopyrequest
2023-displayatcopyrequest

and so on ...

the numeric portion will be dynamic so how do I code the function to make this work

Thank you in advance
<script type="text/javascript">
function checkAll()
	{
		var $fieldId = 16;
		if(document.frmCreate.mainChkBx.checked== true)
			{
				for(var i=0; i < document.frmCreate.displayatcopyrequest.length; i++)
					{
					document.frmCreate.displayatcopyrequest[i].checked=true;
					}
			}
		else
			{
				for(var i=0; i < document.frmCreate.displayatcopyrequest.length; i++)
					{
					document.frmCreate.displayatcopyrequest[i].checked=false;
					}
			}
	}

</script>
</head>

<body>
<form name="frmCreate">
<input type="checkbox" id="mainChkBx" onclick="checkAll();" value=""/><strong>Select/Unselect All</strong><br/><br/>
<input type="checkbox" id="16-displayatcopyrequest" value="Romance" />Romance<br/>
<input type="checkbox" id="17-displayatcopyrequest" value="Horror"/>Horror<br/>
<input type="checkbox" id="18-displayatcopyrequest" value="Action"/>Action<br/>
</form>

Open in new window

webForm-ckbxSelectAll.png
webForm-ckbxSelectAll-2.png
0
justmelat
Asked:
justmelat
1 Solution
 
leakim971PluritechnicianCommented:
please, right click on your page, choose view source to post it here
don't forget to add the checkbox un/select all
0
 
GewgalaCommented:
Give the below a try.  Each checkbox is pointing to the "checkAll" function which now accepts new parameters.  The first argument is the base part of the Id that is consistent across all checkboxes of the same type, and the second argument is the checkall checkbox itself.  The function loops through all checkboxes in the form until it finds one that has the same base part of the id that is passed into the function, like "15-displayatcopyrequest" and then sets the checked property on that matched to be what the mainCheckBox argument passed in is (2nd parameter).


<input type="checkbox" onclick="checkAll('displayatcopyrequest', this);" value=""/><strong>Select/Unselect All Display At Copy Request</strong>
<input type="checkbox" onclick="checkAll('displayatlist', this);" value=""/><strong>Select/Unselect All Display At List</strong>
<input type="checkbox" onclick="checkAll('required', this);" value=""/><strong>Select/Unselect All Required</strong>

Open in new window



function checkAll(name, mainCheckBox)
{
                var checkBoxes = document.getElementsByTagName("input");

                for (var x = 0; x < checkBoxes.length; x++)
                {  
                       var cBox = checkBoxes[x];
                       if (cBox.type == "checkbox")
                       {
                               if (cBox.id.indexOf(name) > -1)
                               {
                                     cBox.checked = mainCheckBox.checked;
                               }
                       }
                }
}

Open in new window





0
 
justmelatAuthor Commented:
Attached is a portion of the code - obviously I can't display the entire thing because this is a company app.

Do a search for this "id="15-displayatcopyrequest" in the code snippet attached.  That is what I want to incorporate into my javascript function

The checkAll() is included above, but reminder is this is code i typically use to very generic/basic html apps
<!-- Display section fieldsets -->

			    <tr>

			       <td valign="top">

					    <fieldset><legend class='sectiontitle'><input id="section-title-11" name="section-title-11" maxlength="120" size="40" class="sectiontitle" value="Project Overview" ></legend><div align="right" style="padding-right:10px"><a style="cursor:pointer" onclick="openPopupWindow('formdesign/reorder/sectionfield/11', 620, 400)" class="linktext"> Reorder Fields </a><span class="valuetext">|</span><a style="cursor:pointer" onclick="deleteSection(11, 'deletesection')" class="linktext"> Delete Section </a></div><table id="tableSection-11" width='98%' border='0' cellpadding='2' cellspacing='2'><tr height="20"><td width="8%" align="center" class="labeltext" bgcolor="#C0C0C0">Display In List?</td><td width="10%" align="center" class="labeltext" bgcolor="#C0C0C0">Display In "Copy Request" Filter?</td><td width="15%" align="center" class="labeltext" bgcolor="#C0C0C0">Field Name/Label</td><td width="15%" align="center" class="labeltext" bgcolor="#C0C0C0">Field Type</td><td width="7%" align="center" class="labeltext" bgcolor="#C0C0C0">Required?</td><td width="20%" nowrap align="center" class="labeltext" bgcolor="#C0C0C0">Map to RoboHead Field?</td><td width="2%" nowrap align="center" class="labeltext" bgcolor="#C0C0C0">Help</td><td width="3%" bgcolor="#C0C0C0">&nbsp;</td></tr><tr bgcolor='#ffffff'><td align="center" class="valuetext"><div id='td-15-displayatlist'><table cellpadding='0' cellspacing='0'><tr><td class="valuetext" ><input type="checkbox" name="15-displayatlist" id="15-displayatlist" value="1"checked></td></tr></table></div></td><td align="center" class="valuetext"><div id='td-15-displayatcopyrequest'><table cellpadding='0' cellspacing='0'><tr><td class="valuetext" ><input type="checkbox" name="15-displayatcopyrequest" id="15-displayatcopyrequest" value="1"></td></tr></table></div></td><td  class="valuetext" align="center"><input id="15-name" name="15-name" maxlength="120" size="30" class="valuetext" value="Project Requested By" ></td><td class="valuetext" align="center">
<select id="15-type" name="15-type" class="valuetext"   onchange="showHideSetOptionsLink(this.value, 15)">
<option value="1" selected> Text </option>
<option value="2" > Text Area </option>
<option value="3" > Drop Down </option>
<option value="4" > Check Box </option>
<option value="5" > Radio Button </option>
<option value="6" > Date Field </option>
<option value="7" > Multi Select </option>
</select>
<div id="divSetOptions15" style="display:none">[<a style="cursor:pointer" onclick="openPopupWindow('formdesign/setoptions/15', 620, 500)" > set options </a>]
</td><td class="valuetext" align="center"><div id='td-15-required'><table cellpadding='0' cellspacing='0'><tr><td class="valuetext" ><input type="checkbox" name="15-required" id="15-required" value="1"></td></tr></table></div></td><td class="valuetext" align="center">

Open in new window

0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
GewgalaCommented:
Have you given my example up above a test?
0
 
justmelatAuthor Commented:
Hi Gewgala:

I have this working on my local demo app, but waiting for the network admin to reset my permissions to the staging server, so I can do an actual test on the app.
0
 
GewgalaCommented:
Cool, I'm eager to know how it goes ;)
0
 
justmelatAuthor Commented:
Gewgala:

AWESOME work, absolutely awesome.  Finally got my permissions to the staging server reset and put the code in last night.  worked like a charm.  Thank you so much.

There is an issue, but it's because I didn't think this all way way thru. It was not obvious until I got all of your code.  It has to do with the fact that there will be multiple sections in a web form, so I think it would be better to have the select All/None checkboxes appear in each section/fieldset and control the check-boxes that appear in only that particular section.

I am going to ask this question in a separate session because you have definitely answered my original question.  THANK YOU SO MUCH!!!
0
 
justmelatAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for justmelat's comment http:/Q_27391154.html#36950656

for the following reason:

Absolutely spot-on SOLUTION. &nbsp;Complete code solution provided. &nbsp;Didn't send me to some link to read about some semi-related solutions. &nbsp;EXCELLENT!!!!
0
 
justmelatAuthor Commented:
Hi Moderate

I have apparently hit the wrong button.  I intended to grant all the points to Gewgala, but think I clicked on my response to him.  Could you reopen this thread so I can grant the points correctly please?
0
 
justmelatAuthor Commented:
Absolutely spot-on SOLUTION. &nbsp;Complete code solution provided. &nbsp;Didn't send me to some link to read about some semi-related solutions. &nbsp;EXCELLENT!!!!
0
 
GewgalaCommented:
I'm glad I could help.  Good luck.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now