[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-10-11
12
Medium Priority
?
325 Views
Last Modified: 2012-05-12
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
Comment
Question by:justmelat
12 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 36950599
please, right click on your page, choose view source to post it here
don't forget to add the checkbox un/select all
0
 
LVL 7

Accepted Solution

by:
Gewgala earned 2000 total points
ID: 36950634
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
 
LVL 1

Author Comment

by:justmelat
ID: 36950656
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 7

Expert Comment

by:Gewgala
ID: 36950724
Have you given my example up above a test?
0
 
LVL 1

Author Comment

by:justmelat
ID: 36956947
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
 
LVL 7

Expert Comment

by:Gewgala
ID: 36957025
Cool, I'm eager to know how it goes ;)
0
 
LVL 1

Author Comment

by:justmelat
ID: 36963255
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
 
LVL 1

Author Comment

by:justmelat
ID: 36963309
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
 
LVL 1

Author Comment

by:justmelat
ID: 36963310
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
 
LVL 1

Author Closing Comment

by:justmelat
ID: 36963315
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
 
LVL 7

Expert Comment

by:Gewgala
ID: 36963627
I'm glad I could help.  Good luck.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses
Course of the Month20 days, 6 hours left to enroll

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question