How to check "checkbox" dynamically - jQuery Mobile

Question

With HTML a checkbox is created like this:

<form>
   <input type="checkbox" id="category1">Category1<br>
</form>

With javascript we can check the checkbox like this:

$("#category1")[0].checked = true

Now I am trying to create the same page with jquery-mobile. The checkbox looks like this:

<form>
    <label>
        <input name="checkbox-0 " type="checkbox">Check me
    </label>
</form>

Why is there is no id here? Is the name the id? Should I delete the attribute name and create one with the name id?

How can I check this checkbox here with Javascript/jQuery?

I tried the code above, but it doesn't seem to work for this checkbox.

for JS always check [jQuery Mobile API](http://api.jquerymobile.com/checkboxradio/#method-refresh). — Omar, Jun 10 '13 at 16:37
Check this out: http://stackoverflow.com/questions/11138898/check-if-a-jquery-mobile-checkbox-is-checked Have you gone though the proper documentations and all other questions related to this sort of topic? — Jayram, Jun 10 '13 at 15:37
I DID check the docs. I was in this page: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/checkbox/ . Theres nothing there about javascript. Just the jquery mobile part. — Jonh Smid, Jun 10 '13 at 16:14

Omar · Accepted Answer · 2013-06-10T16:38:13.923

58

You need to refresh it after changing its' .prop, using .checkboxradio('refresh'). This is the correct way to check checkbox/radio in jQuery Mobile.

Demo

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

Reference: jQuery Mobile API

edited Jun 10 '13 at 16:38

answered Jun 10 '13 at 15:42

Omar

32,302
9
69
112

2

Perfect answer as always Omar. Thank you very much sir. – Jonh Smid Jun 10 '13 at 16:57
@JonhSmid Thank you and take it easy buddy :) – Omar Jun 10 '13 at 16:58
1

thankyou! also, why?!?! ah, per the documentation: https://api.jquerymobile.com/checkboxradio/#method-refresh – Jason Wall Apr 25 '16 at 19:21
I get the error `Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'` even in the linked demo page. See my answer for how I got it working. – SharpC May 29 '21 at 09:44
@SharpC wrap it in `pagecreate` event. You're calling `refresh` before the widget is initialized. – Omar Jun 01 '21 at 10:50
@Omar in my code this is actually while the page is displayed and after a user event. The linked demo also fails with the same error in Chrome at the moment. – SharpC Jun 01 '21 at 18:14
@sharpc the linked demo is old, the libraries most likely aren’t linked properly. All the demos in my answers aren’t working as I need to update each and every one. Since you’re using flip switch widget, you need to call flipswitch methods not checkboxradio. – Omar Jun 01 '21 at 19:23

tymeJV · Answer 2 · 2013-06-10T16:58:20.760

4

You can do:

$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked =  $('input[name="checkbox-0"]').prop("checked"); //gets the status

edited Jun 10 '13 at 16:58

answered Jun 10 '13 at 15:36

tymeJV

103,943
14
161
157

if i gave an id to the checkbox would that be correct : $(#id_name).prop("checked", true); ? – Jonh Smid Jun 10 '13 at 16:03
Yes, dont forget the quotes in the selector `$("#id_name").prop("checked", true);` – tymeJV Jun 10 '13 at 16:09
1

@JonhSmid -- Was unaware, I've updated my answer. Thx for pointing this out! – tymeJV Jun 10 '13 at 16:58

score 2 · Answer 3 · answered Jun 10 '13 at 15:37

2

Straight from the jQ Mobile docs:

$("input[type='checkbox']").attr("checked",true);

answered Jun 10 '13 at 15:37

blend

640
4
6

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); Straight there! – Asad kamran Mar 13 '18 at 03:24

score 0 · Answer 4 · answered May 29 '21 at 09:43

With the solution from @Omar I get the error:

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

I actually had a flipswitch checkbox:

<div class="some-checkbox-area">
    <input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
           data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>

and found the solution was:

$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )

Notes

I don't usually specify ids for page content as jQuery Mobile loads multiple div.ui-page content into a single HTML page for performance. I therefore never really understood how I could use id if it might then occur more than once in the HTML body (maybe someone can clarify this).
If I use prop rather than attr the switch goes into an infinite flipping loop! I didn't investigate further...

flipswitch and checkbox are two different widgets. https://stackoverflow.com/a/21797694/1771795 — Omar, Jun 01 '21 at 11:23

How to check "checkbox" dynamically - jQuery Mobile

4 Answers4

Linked

Related