jquery-mobile - 在 JQuery Mobile 对话框中选中和取消选中复选框

Question

我尝试了这段代码来实现我想做的事情。当我在我的普通 HTML 文件中尝试它时它可以工作，但是当我在我的 JQuery Mobile 页面中尝试它时，代码对我来说效果不佳。是否有不同的方法或代码来选择 JQuery Mobile 复选框？

这是我尝试过的代码：

JAVASCRIPT：

<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
    if(!document.forms[FormName])
        return;
    var objCheckBoxes = document.forms[FormName].elements[FieldName];
    if(!objCheckBoxes)
        return;
    var countCheckBoxes = objCheckBoxes.length;
    if(!countCheckBoxes)
        objCheckBoxes.checked = CheckValue;
    else
        // set the check value for all check boxes
        for(var i = 0; i < countCheckBoxes; i++)
            objCheckBoxes[i].checked = CheckValue;
}

HTML

<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
    <input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
    I like Britney Spears 
</label>
<br>

<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
    I like Hillary Duff
</label>
<br>

<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
    I like Mandy Moore 
</label>
<br>

<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
&nbsp;&nbsp;
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">

Answer 1

我不知道 JQuery Mobile 的复选框在通过 JQuery 或 Javascript 取消选中/选中它们后需要刷新。这是代码：

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

http://api.jquerymobile.com/checkboxradio/#method-refresh

Answer 2

尝试这个：

function SetAllCheckBoxes(FormName, CheckValue){
    $.each($("#"+FormName+" input[type=checkbox]"), function(){
        $(this).attr("checked",CheckValue).checkboxradio("refresh");
    });
}

我删除了 FieldName 因为你的函数被命名为 SetAllCheckBoxes，只是你的输入字段是一样的。你只需要告诉你的表单是什么以及你的复选框的状态。

Answer 3

要在 jquery mobile 中切换/刷新复选框，您需要使用 .prop，而不是 .attr。

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