Manipulating Hubspot Form Using jQuery

[mmilliganUBA]

Hello,

I want to provide a check box that will select all available checkboxes in a form. I have inserted my jQuery (1.9.1) code into the embedded code but the All checkbox doesn't seem to trigger the rest of the checkboxes. Here is my embedded code:

hbspt.forms.create({ portalId: 'XXXXXX', formId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', onFormReady: function($form){ $('#please_select_the_events_that_you_wish_to_attend0-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:checkbox').change(function () { if($(this).prop("checked")) $('input:checkbox').prop('checked','checked'); else $('input:checkbox').removeProp('checked'); }); } });

 I have tested my jQuery in jsFiddle and it works. What am I missing?

[TRooInbound]

Hi @mmilliganUBA

If you are using jQuery to manipulate the values of form inputs (i.e. using val() or prop()), you must trigger a change event using change() or trigger('change') for the change to properly register for more information please visit here

here is modified your previous code please replace with previous one.

hbspt.forms.create({ 
	portalId: 'XXXXXX', 
	formId: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', 
	onFormReady: function($form){ 
		$('#please_select_the_events_that_you_wish_to_attend0-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:checkbox').change(function () { 
			$("input:checkbox").not(this).prop('checked', $(this).prop('checked')).change();
		}); 
	} 
});

Hope it works for you

Did our post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound
hello@trooinbound.com | https://www.trooinbound.com