21

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.

Improve this question
3

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Perfect answer as always Omar. Thank you very much sir.
@JonhSmid Thank you and take it easy buddy :)
thankyou! also, why?!?! ah, per the documentation: api.jquerymobile.com/checkboxradio/#method-refresh
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 wrap it in pagecreate event. You're calling refresh before the widget is initialized.
|
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
Improve this answer

3 Comments

if i gave an id to the checkbox would that be correct : $(#id_name).prop("checked", true); ?
Yes, dont forget the quotes in the selector $("#id_name").prop("checked", true);
@JonhSmid -- Was unaware, I've updated my answer. Thx for pointing this out!
2

Straight from the jQ Mobile docs:

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

1 Comment

$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); Straight there!
0

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...
Improve this answer

1 Comment

flipswitch and checkbox are two different widgets. stackoverflow.com/a/21797694/1771795

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.