How to detect check box clicks

3 replies · opened Sep 1, 2019

JjfoxworthSep 1, 2019

When a page loads, there is a lot of formatting done to check boxes and elements are created. How do you detect a click on one of these as a class on the input is not detected due to the input being hidden.

SSemicolon WebSTAFFSep 1, 2019

Hello,

This can be handled by the Default jQuery change event: https://api.jquery.com/change/ . Example:

$( "input[type='checkbox']" ).change(function() {
	// your functions here
});

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

JjfoxworthSep 1, 2019

I have tried this a million different ways and can't get it to work. The input is entered in html as ...

<label>Show Dimensions</label>
<input class="bt-switch" type="checkbox" checked data-on-text="Yes" data-off-text="No" id="backlitShowDimensions">

Once it is formatted, it looks like this on the page.

<label>Show Dimensions</label>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-id-backlitShowDimensions bootstrap-switch-animate bootstrap-switch-off" style="width: 92px;">
<div class="bootstrap-switch-container" style="width: 135px; margin-left: -45px;">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 45px;">Yes</span>
<span class="bootstrap-switch-label" style="width: 45px;"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 45px;">No</span>
<input class="bt-switch" type="checkbox" checked="" data-on-text="Yes" data-off-text="No" id="backlitShowDimensions">
</div>
</div>

The actual check box is hidden, so there can't be an event where it is clicked and the change event is not fired either. Using the function above does not fire an event when the bt-switch is clicked or changed.

SSemicolon WebSTAFFSep 2, 2019

Hello,

Thanks for your Patience and Apologies about the Inconveniences caused!

We dug a little bit more into this and this is the code you will need to use for recording events for the Bootstrap Switch:

$( "input[type='checkbox']" ).on( 'switchChange.bootstrapSwitch', function() {
	// your functions here
	alert('Value Changed!');
});

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard