如何動態檢查“復選框” - jQuery Mobile

Question

使用 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 在此處選中此復選框？

我嘗試了上面的代碼，但它似乎不適用於此復選框。

Answer 1

您需要在使用.checkboxradio('refresh')更改其.prop之后刷新它。 這是在jQuery Mobile中選中復選框/單選按鈕的正確方法。

演示版

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

參考： jQuery Mobile API

Answer 2

你可以做：

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

Answer 3

直接來自jQ Mobile文檔 ：

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

Answer 4

使用@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 ，則開關將進入無限翻轉循環！ 我沒有進一步調查...