Search jQuery

jQuery Forum

jQuery Mobile reading checkbox or radio

in jQuery Mobile • 8 years ago

What is the official method to read the value of a checked radio/checkbox? Is there something I am not reading, because I can find out how to create but not read (or set) these input tags?

For example: http://demos.jquerymobile.com/1.4.4/checkboxradio-checkbox/

It has proven frustrating bug tracing my code only to find why I was not saving my 'ticked' box values. In the end, I discovered a class " ui-btn-active" is set when the operator 'ticks' a box and I must use this to get the corresponding value.

Other than the Demos and the API (which shows how to dynamically create a checkbox) I cannot find anything that describes how to read the selected values. Is there some documentation I should, but am not reading?

All help appreciated...

Replies(8)

Omar

Re: jQuery Mobile reading checkbox or radio

8 years ago

The docs don't discuss how to read values, however, it shows how to set values since some additional methods are required to maintain UI.

When - for example - checkbox or radio is checked, an event called change is fired. Use it to retrieve the value of the checked/uncheck element.

$("[type=checkbox]").on("change", function () {
console.log( $(this).prop("checked") ); /* returns true or false */
console.log( $(this).val() ); /* return value */
});

To check (true) / uncheck (false) radio button or checkbox programmatically

$(".selector").prop("checked", true).checkboxradio("refresh")

fiprojects

Re: jQuery Mobile reading checkbox or radio

8 years ago

Big Thanks - this helped get me moving again!

Related, but NOT a serious problem for me but I thought I would mention is getting errors when programmatically setting/unsetting

$("[type=checkbox]").prop("checked", true).checkboxradio("refresh");

Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

The error only happens once - meaning I can change pages, return to my checkbox and find it correctly sets (or unsets) without error. It's not a show stopper for me, I can investigate it later.

And... I am curious - When checkbox is set, it returns false, and when checkbox is unset, it returns true. Again, not a show stopper, I just find it odd and thought I would mention it.

var checked=$("#myselector").prop("checked").toString();
console.log(checked);

Omar

Re: jQuery Mobile reading checkbox or radio

8 years ago

You're welcome :)

The error is because you're calling refresh before checkbox is created or when page containing it is hidden. If you provide more details on when you're refreshing it, It'll be easier to find the error.

And... I am curious - When checkbox is set, it returns false, and when checkbox is unset, it returns true. Again, not a show stopper, I just find it odd and thought I would mention it.

Could you please elaborate on this?

.prop("checked") returns boolean value, why do you want to convert it into a string?

fiprojects

Re: jQuery Mobile reading checkbox or radio

8 years ago

Fair comment pointing out the boolean value and ill usage of toString(). I used toString() because (from what I recall) writing the result to console.log resulted in "object" as opposed to the words true or false. Basically, I expected to get a result of true if the box was ticked, and false if the box was not ticked, but instead, I got the reverse (true when the box was unticked). I just found that result strange.

And - thanks again for the heads up on the checkboxradio("refresh"). I played more with it offline and got it working, but until returning and reading your comments above, I was less clear why the following works.

$("input[type=checkbox],input[type=radio]").checkboxradio().prop("checked", false).checkboxradio("refresh");

I suspect that because my radio/checkboxes are first initialized while the form is hidden has much to do with it.

I raise my hat, and bow your head to you Good Sir! (and I took a look at your blog - your posts are likely to win my company when I am traveling on train)

I suspect because of your efforts my hair will start to grow back again :)

Enjoy the day!

Omar

Re: jQuery Mobile reading checkbox or radio

8 years ago

Thank you for your kind words, they are worth millions :)

The below code works because you're manually initializing .checkboxradio(), if you remove that function, it will through the same error you got before.

$(".selector")
.checkboxradio()
.prop("checked", true)
.checkboxradio("refresh");

Check this demo http://jsfiddle.net/Palestinian/gaeppecb/ check "foo" checkbox to move to next page. "bar" checkbox is enhanced and "checked". Re-run the same demo but after commenting .checkboxradio()

fiprojects

Re: jQuery Mobile reading checkbox or radio

8 years ago

I'm back again - events on my checkbox works on windows phone, desktop firefox, but not on iPad2 Safari or Chrome.

HTML:

< input name="OptExtra0" id="OptExtra0" value="0" type="checkbox" class="OptExtra">
< label for="OptExtra0" id="OptExtraLabel0" class="OptExtra">
< input name="OptExtra1" id="OptExtra1" value="0" type="checkbox" class="OptExtra">
< label for="OptExtra1" id="OptExtraLabel1" class="OptExtra">

Javascript:

$("label.OptExtra").click( MyClickAction );

The javascript event is called on label tags with class OptExtra on purpose.

If the event is called on input tag, the touch screen fails to execute,
If the event is done on all class OptExtra it gets executed twice on Windows Firefox and Windows Phone.

I discovered by binding the event to label, it executes only once (on windows firefox/phone), but not on iOS.

Got any suggested solutions as to how I can have an event execute on the checkbox without it being run twice?

Omar