Hello, I’m trying to help a client set up a Select / Unselect all for their online form. They are using Gravity Forms on WordPress and I have searched online to try to find a solution. I did find one that works for the first step in the form, but once you go to the second, it does not work. The form itself is a one-page form, so my guess is some conflict with duplicated javascript functionality but I know little about JS unfortunately.
The form can be found here: http://www.edufundingpartners.com/adnet/choose-the-brands/
If you click on the second checkbox for each step it will open up the options to check. The Retail Brands will work correctly but the Online Retail Brands do not.
The javascript I have set up is:
var $j = jQuery.noConflict();
$j(document).ready(function(){
// Retail Brands
$j("#selectall").click(function () {
$j("input[name^='input_1.']").attr('checked', this.checked);
})
$j("input[name^='input_1.']").click(function(){
if($j("input[name^='input_1.']").length == $j("input[name^='input_1.']:checked").length) {
$j("#selectall").attr("checked", "checked");
} else {
$j("#selectall").removeAttr("checked");
}
})
// Online Retail Brands
$j("#selectall2").click(function () {
$j("input[name^='input_6.']").attr('checked', this.checked);
})
$j("input[name^='input_6.']").click(function(){
if($j("input[name^='input_6.']").length == $j("input[name^='input_6.']:checked").length) {
$j("#selectall2").attr("checked", "checked");
} else {
$j("#selectall2").removeAttr("checked");
}
})
})
The first one works just fine, but when I duplicate it and change the reference to #selectall2, the boxes do not respond.
Any ideas of what could be the conflict? Thanks for any input.