• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Select All checkbox for multiple Checkboxes

Select All checkbox for multiple Checkboxes 14 years 2 months ago #10003

  • patrick.jackson2
  • patrick.jackson2's Avatar
  • OFFLINE
  • Fresh Boarder
  • KPS - Joomla Consultant Melbourne Australia
  • Posts: 12
  • Thank you received: 6
Had a need to add a "Select All" checkbox that would tick multiple other checkboxes on a form, so thought I'd both share the solution I worked out, as well as storing it somewhere for the next time I need it :)

Due to the way the field names are generated in RSForms, there's several methods that I found on the web that don't work with RSForms as they use simpler field name conventions. This one however works!

Select all the checkboxes on your form
  • Create your form
  • Add a checkbox group to the form
  • Generate your layout, then turn off "Generate Auto Layout"
  • At the top of your form layout, paste the following Script code
    <script type="text/javascript">
    function selectAll(x) {
    	for(var i=0,l=x.form.length; i<l; i++)
    	if(x.form[i].type == 'checkbox' && x.form[i].name != 'sAll')
    		x.form[i].checked=x.form[i].checked?false:true
    }
    </script>
  • Next, add a checkbox in the layout where you want it to sit. The checkbox code should look have the name sAll so that it is triggered by the javascript, and an onClick trigger to call selectAll(this).

    Note that you can add a regular checkbox called sAll as a checkbox on your form, but assuming that you're using it just for the select/unselect, you don't need it to save in the database, so can just place it in the form layout.
    <input type="checkbox" name="sAll" id="sAll" onclick="selectAll(this)" /><label>Check All</label>
  • Save and preview your form to test it works.

Select sets of checkboxes on your form
  • You may have several of checkbox groups on your form. You might not want the selectAll function to select all of them (default action).
  • To limit the selection, change the Javascript to select the particular boxes.
  • Change
    x.form[i].type == 'checkbox' && x.form[i].name != 'sAll'
  • To
    x.form[i].type == 'checkbox' &&
    (x.form[i].name == 'form[checkbox1][]' ||
    x.form[i].name == 'form[checkbox2][]' ||
    x.form[i].name == 'form[checkbox3][]')
    where checkbox1, checkbox2 and checkbox3 are the names of your Checkbox groups on your form. (The || is javascript for OR, so to group all the selections together, you need to put the OR values together in brackets).

I hope that helps. If you have any questions or suggestions on improving it, I'd like to hear from you.

I'd share credit for it with where I found the post that helped, but it's from 2004 and the user details on the site are sketchy: Forms Check All Checkboxes
Last Edit: 14 years 2 months ago by patrick.jackson2. Reason: Added ID tag to example
The administrator has disabled public write access.
The following user(s) said Thank You: webmaster12, epoulin

Re:Select All checkbox for multiple Checkboxes 14 years 2 months ago #10004

  • patrick.jackson2
  • patrick.jackson2's Avatar
  • OFFLINE
  • Fresh Boarder
  • KPS - Joomla Consultant Melbourne Australia
  • Posts: 12
  • Thank you received: 6
After posting and checking my handiwork, I found that the above code toggles the set of checkboxes.

So if you had 6 boxes, and selected 3 of them before the Select All was ticked, then you would toggle the selection to the other 3 boxes.

To resolve that, the code should look at the status of sAll first, then based on that (checked/unchecked) should then loop through the rest of the checkboxes and set them as appropriate.
<script type="text/javascript"><!-- 
 
function selectAll(x) {
 
if (document.getElementById('sAll').checked == true)
	for(var i=0,l=x.form.length; i<l; i++)
	if(x.form[i].type == 'checkbox' && x.form[i].name != 'sAll')
		x.form[i].checked=true
 
if (document.getElementById('sAll').checked == false)
	for(var i=0,l=x.form.length; i<l; i++)
	if(x.form[i].type == 'checkbox' && x.form[i].name != 'sAll')
		x.form[i].checked=false
}
 
//--></script> 
The administrator has disabled public write access.
The following user(s) said Thank You: webmaster12

Select All checkbox for multiple Checkboxes 14 years 2 months ago #10005

  • patrick.jackson2
  • patrick.jackson2's Avatar
  • OFFLINE
  • Fresh Boarder
  • KPS - Joomla Consultant Melbourne Australia
  • Posts: 12
  • Thank you received: 6
To illustrate the difference between the two versions of the javascript, I've set up an example page on my site.
Last Edit: 2 years 3 months ago by patrick.jackson2. Reason: Example page is no longer available
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!