Take a look at this sample form I put up, based on your 20-item list:
http://gravity.chrishajer.com/select-all-with-jquery/
I added this HTML block to the form after my list of checkboxes:
[html]
<input type="button" class="check" value="Select All" />
That puts a "Select All" button after the checkbox list.
Then, I created this script to provide the check/uncheck all functionality:
[js]
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.check:button').toggle(function(){
$j('input:checkbox').attr('checked','checked');
$j(this).val('Unselect All')
},function(){
$j('input:checkbox').removeAttr('checked');
$j(this).val('Select All');
})
})
That will toggle back and forth between "Select All" and "Unselect All". I unchecked the boxes in the form builder by default, and have the button saying "Select All".
I saved that script to a file called "select-all.js" in my child theme's js folder.
To include that script on the page where this form is in use (form 108), I added this to my theme's functions.php:
[php]
add_action('gform_enqueue_scripts_108', 'enqueue_select_all_script', 10, 2);
function enqueue_select_all_script($form, $is_ajax) {
wp_enqueue_script('select_all_script', get_stylesheet_directory_uri() . '/js/select-all.js', array('jquery'));
}
That will load my script on any page with form 108 present, and handles the jQuery dependency. Change the "108" to your form ID.
This can be extended if you need, for multiple checkbox lists (right now, it will toggle all check boxes on the form.) You can give a CSS Class name to individual groups of checkboxes if you have more than one group on a form, then add an individual button after each group, and extend the script to target just the specific group of checkboxes you want.
Let me know if you have any questions with implementation. Thanks.
Posted 12 years ago on Monday July 30, 2012 |
Permalink
