Semantic-ui: No change event is fired when toggling a checkbox

[iamolivinius]

When you click a toggleable checkbox the input object does not fire a change event.

To demonstrate this I created a jsfiddle. Check your console for messages.

In my opinion a change event should be fired to have the opportunity to handle events instead of struggling with callback functions like it is documented in the settings sections of the checbox module documentation.

[brigand]

@oliverh855 I don't know ember well, but if you can give the label an ID matching the checkbox, the checkbox will work without Semantic-UI's JavaScript. example

<div class="ui input checkbox">
    <input type="checkbox" id="ember_008" />
    <label for="ember_008">Toggle the box</label>
</div>

[mrzafod]

@oliverh855 your observation doesn't handle an event because default behavior is triggering on "click" and simply set "checked" attribute for checkbox . You can try to addEventListener and get the same. @brigand is absolutely right - that way you can handle a native change-event on input and get an observation is working correctly

[jlukic]

You can use the frameworks change event, in fact we give you 3 callbacks!

See callbacks http://semantic-ui.com/modules/checkbox.html#/settings

$('.ui.checkbox').checkbox('onchange', function() {});

It'd also be a simple fix to have the standard change event fire, so i'll look into fixing that. But in general I'd recommend sticking with the framework's abstraction.

[iamolivinius]

Thanks a lot @brigand ! Have to admit that I missed this part of the documentation. Now I implemented it that way, and it works just fine.

[cowwoc]

(Should this issue be closed?)

[silverdr]

You can use the frameworks change event, in fact we give you 3 callbacks!
See callbacks http://semantic-ui.com/modules/checkbox.html#/settings
$('.ui.checkbox').checkbox('onchange', function() {});

I am very much missing some working examples there in the above mentioned docs. The above, unfortunately doesn't work for me:
http://jsfiddle.net/u5wm4513/5/

[clemsontiger]

onchange is not working for me either.

[jlukic]

Syntax is just off,

See this Jsfiddle

[clemsontiger]

thanks, that worked. although it's firing twice, not sure why. any thoughts?

[clemsontiger]

ah it's because i have the input and label linked with the for attribute. the problem though is if I don't use checkbox javascript my checkbox does not get checked visually if i've got the div bound by an event

[clemsontiger]

nevermind, it's because I was binding using my 'tap' event (custom event from filamentgroup). changed it to "change" event and works as expected. thanks!

[mderazon]

I am also having some difficulties triggering that onChange event in React
when not using semantic's js like @brigand suggested it works
please see http://jsfiddle.net/zza2furx/1/

[brigand]

@mderazon you need id/for props to make it work.

<input type="checkbox" id="someid"
           onChange={this.handleCheckboxChange("topup_enabled")} checked={user.topup_enabled} />
<label htmlFor="someid"></label>

_{Side note: generate ids randomly or sequentially when you can. Globally unique strings aren't reusable.}

[mderazon]

@brigand thanks, indeed that solves the problem, do you know is this documented anywhere ? the reason for this ?
just curious ...

[brigand]

@mderazon it's just how checkboxes work in browsers. Nothing specific to react or semantic. You click the label and it looks for a checkbox with the id matching the label's for attribute, and toggles it.

[fmilani]

Got the same issue with meteor + react + semantic UI.
Using $('.ui.checkbox').checkbox('setting', 'onchange', function() {}); worked for me but, unfortunately, react's onChange didn't.
I noticed that the checkbox always come with class="hidden" and only when I manually remove the class (i.e. inspecting the elements of the page) I can make react's onChange fire. Any thoughts? Thanks