21

使用 HTML 创建一个复选框，如下所示：

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

使用 javascript，我们可以像这样检查复选框：

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

现在我正在尝试使用 jquery-mobile 创建相同的页面。复选框如下所示：

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

为什么这里没有id？名字是id? 我应该删除属性名称并使用该名称创建一个id吗？

如何使用 Javascript/jQuery 在此处选中此复选框？

我尝试了上面的代码，但它似乎不适用于此复选框。

4

4 回答 4

57

您需要在更改其' 后刷新它.prop，使用.checkboxradio('refresh'). 这是在 jQuery Mobile 中检查复选框/收音机的正确方法。

演示

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

参考：jQuery Mobile API

于 2013-06-10T15:42:34.213 回答
4

你可以做：

$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked =  $('input[name="checkbox-0"]').prop("checked"); //gets the status
于 2013-06-10T15:36:17.517 回答
2

直接来自jQ Mobile 文档：

$("input[type='checkbox']").attr("checked",true);
于 2013-06-10T15:37:32.437 回答
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...
于 2021-05-29T09:43:49.793 回答