如何动态检查“复选框” - jQuery Mobile

IT技术 javascript jquery html jquery-mobile
2021-01-25 17:34:13

使用 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个回答

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

演示

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

参考:jQuery Mobile API

谢谢!还有,为什么?!?!啊,根据文档:api.jquerymobile.com/checkboxradio/#method-refresh
2021-03-14 17:34:13
Uncaught Error: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'即使在链接的演示页面中,也会收到错误消息请参阅我的答案以了解我是如何让它工作的。
2021-03-16 17:34:13
@JonhSmid 谢谢你,放轻松,伙计:)
2021-03-30 17:34:13
@SharpC 将其包装在pagecreate事件中。您在refresh小部件初始化之前调用
2021-03-30 17:34:13
奥马尔一如既往的完美答案。先生非常感谢您。
2021-04-04 17:34:13

你可以做:

$('input[name="checkbox-0"]').prop("checked", true).checkboxradio('refresh'); //sets the checkbox
var isChecked =  $('input[name="checkbox-0"]').prop("checked"); //gets the status
如果我给复选框一个 id 是正确的: $(#id_name).prop("checked", true); ?
2021-03-17 17:34:13
是的,不要忘记选择器中的引号 $("#id_name").prop("checked", true);
2021-03-22 17:34:13
@JonhSmid - 不知道,我已经更新了我的答案。感谢指出这一点!
2021-03-27 17:34:13

直接来自jQ Mobile 文档

$("input[type='checkbox']").attr("checked",true);
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); 就在那儿!
2021-03-23 17:34:13

使用@Omar 的解决方案,我收到错误消息:

未捕获的错误:无法在初始化之前调用 checkboxradio 上的方法;试图调用方法“刷新”

我实际上有一个翻转开关复选框

<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>

并发现解决方案是:

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

笔记

  • 我通常不会为页面内容指定 id,因为 jQuery Mobile 将多个div.ui-page内容加载到单个 HTML 页面中以提高性能。因此,我从未真正理解id如果它可能在 HTML 中出现不止一次,我该如何使用body(也许有人可以澄清这一点)。
  • 如果我使用prop而不是attr开关进入无限翻转循环!我没有进一步调查...
翻转开关和复选框是两个不同的小部件。stackoverflow.com/a/21797694/1771795
2021-03-27 17:34:13