I have a form with many checkboxes in a section of said form, what would be the easiest way to add a select all button?
Give your checkbox field a CSS class like "checkbox" and then use a custom HTML field to create two buttons that will be used to check all or clear all selections
<button onclick="checkAll()" type="button">Check All</button> <button onclick="clearAll()" type="button">Clear All</button>
Then use JavaScript like
function checkAll() {
$('.checkbox input').prop('checked', true);
}
function clearAll() {
$('.checkbox input').prop('checked', false);
}
okay - from a non coder :) I copied this into my form and it didn't work - any suggestions? I am trying to use this on a field that is hidden until a radial button is chosen - then it shows.
And yes - I added the CSS class of checkbox to the field in the form.
Never mind - it helps if you create the buttons... sorry!
Hi Alexander,
I have a form that the field is in collections. I tried your script and it works. May problem now how to hide the check all and clear all buttons after the submission of the form and unhidden the check all and clear all buttons when the add button of collection is click or selected.
Hopping for your reply.
Thanks
I had a requirement for a "check All" checkbox to be added to the actual checkbox. The attached code will check / uncheck all checkboxes depending on the state of the last checkbox "#Field2-3".
'.checkbox' is the CSS Class of the checkbox.
// selected fields "checked" if choice_4 is checked:
// .checkbox is checkbox CSS
$(document).ready( function() {
$("#Field2-3").click(function(){
if ($("#Field2-3").prop("checked")) {
$('.checkbox input[value=\"choice_1\"]').prop('checked', true);
$('.checkbox input[value=\"choice_2\"]').prop('checked', true);
$('.checkbox input[value=\"choice_3\"]').prop('checked', true);
}
else {
$('.checkbox input[value=\"choice_1\"]').prop('checked', false);
$('.checkbox input[value=\"choice_2\"]').prop('checked', false);
$('.checkbox input[value=\"choice_3\"]').prop('checked', false);
}
})
})
PS: You can also specify which fields you want to check if you don't want to check all fields.
Thanks. Worked like a charm.
I added this code and it works lovely but the checkboxes appear to the left margin as below. did this happen anyone?