Question

我一直在尝试使用jQuery标记一组复选框。我似乎无法理解为什么。

使用Javascript：

function getProjects(course){

console.log("getProjects");
var data = {
  "fn" : "pLoad",
  "course" : course,
  "ajax" : "true"
};
$.ajax({
  type: "GET",
  url: SERVICE_URL, //Relative or absolute path to response.php file
  data: data,
  contentType: "application/json",
  success: function(response) {
    console.log("Recieved Projects!");
    console.log(response);
    var i, list = "";
        for (i = 0; i < response.length; i++) {
            var cid = "#" + response[i].name[0];
            console.log("setting checked: " + cid);
            console.log($(cid).length);
            $(cid).attr("checked");
        }
  }
});

}

HTML：

<td id="blockC" style="width:25%">
                <a href="#" id="expand" data-role="button" data-iconpos="notext" data-icon="arrow-l">Expand</a>
                <hr />

                <label for="core">Core</label>
                <input id="core" type="checkbox" value ="Core">

                <label for="adultScotland"> Adults(Scotland)</label>
                <input id="adultScotland" type="checkbox" value ="adultScotland">

                <label for="adultEngland">Adults(England)</label>
                <input id="adultEngland" type="checkbox" value ="adultsEngland">

                <label for="cFScotland"> Children and Families(Scotland)</label>
                <input id="cFScotland" type="checkbox" value ="cFScotland">

                <label for="cFEngland">Children and Families(England)</label>
                <input id="cFEngland" type="checkbox" value ="cFEngland">

                <label for="epilepsy"> Epilepsy</label>
                <input id="epilepsy" type="checkbox" value ="epilepsy">

                <label for="noCare">Non Care</label>
                <input id="noCare" type="checkbox" value ="noCare">

                <br />
                <hr />
                <br />
                    <form style="width:100%">
                    <input id="name" type="text" placeholder="Name" style="width:100%"/>
                    <input id="link" type="text" placeholder="Link" style="width:100%"/>
                    <a id="save" href="#" data-role="button">Save</a>
                    <a id="delete" href="#" data-role="button">Delete</a>
                    </form>
                </td>

从日志中我可以确认每次脚本运行时cid都使用有效的ID。这里的目标是，当我点击一个＆＃39;课程＆＃39;该脚本将检查课程所属项目的每个复选框。

日志告诉我服务器正在返回正确的项目。

我还没有弄清楚为什么这不起作用。任何帮助，将不胜感激。：）

修改

这是日志：

the Log

<head>
<title>Q learn App Edit</title>
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">-->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>>
<script src="script.js"></script>
<style>
    table, th, td {
        border: 1px solid black;
    }
    td {
        padding: 15px;
    }
</style>
</head>

Answer 1

在上述评论之后，结论是：

$(cid).prop("checked", true);

如果它不起作用并且你在jQuery 1.6下使用，请尝试：

$(cid).attr("checked","checked");

或

$(cid).attr("checked", true);

如果它不起作用（尽管如此），只需使用纯js：

移动

document.getElementById(response[i].name[0]).checked = true;

修改<！/强>

现在，OP绝对有权打开这样的问题，这就是为什么：

使用 jQuery Mobile 1.4.4 和 jQuery 1.11.0 jQuery移动编译器完全改变了您的文档的HTML结构！

简而言之，问题在于：

块：

<label for="cFEngland">Children and Families(England)</label> <input id="cFEngland" type="checkbox" value="cFEngland">

获取翻译成：

<div class="ui-checkbox"> <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Children and Families(England)</label> <input id="cFEngland" type="checkbox" value="cFEngland" data-cacheval="true"> </div>

现在，经过几次测试后，您无法定期切换输入值，因为该复选框的STYLE与css相关，而不是html或js相关。

简而言之，基本上有两种状态：

状态1（复选框关闭）：

<div class="ui-checkbox"> <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">Children and Families(England)</label> <input id="cFEngland" type="checkbox" value="cFEngland"> </div>

它被渲染成类似的东西（在基本的小提琴中）：

状态2（复选框ON）：

<div class="ui-checkbox"> <label for="cFEngland" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on">Children and Families(England)</label> <input id="cFEngland" type="checkbox" value="cFEngland" data-cacheval="false"> </div>

它被渲染成类似的东西（在基本的小提琴中）：

如您所见，该复选框没有任何状态，其行为与其“已检查”的属性无关。

为了解决这个问题，你需要做一些事情。

解决方案

现在，在继续之前，我想首先在这里解释一下：

因为您可能希望将来（或者......好吧......也许就在这里！）获取该复选框的BOOLEAN值，我们将检查它并更改其已检查的属性。这是因为如果您实际上只是为jQuery移动UI设置了它，那么如果您尝试获取其“已检查属性”，则不会检查它。

现在，继续前进，我已经实现了以下功能，为您提供了一种更舒适的方式来处理该UI：

function setCheckboxStatus (id, status) { status == false ? $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-on").addClass("ui-checkbox-off") : $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-off").addClass("ui-checkbox-on"); document.getElementById(id).checked = status; } function toggleCheckbox (id) { $('#'+id).parent().find("label[for="+id+"]").hasClass("ui-checkbox-on") ?$('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-on").addClass("ui-checkbox-off") : $('#'+id).parent().find("label[for="+id+"]").removeClass("ui-checkbox-off").addClass("ui-checkbox-on"); document.getElementById(id).checked ^= 1; } function getCheckboxStatus (id) { return $('#'+id).prop("checked"); }

令人惊讶的是，如果您手动单击一个复选框，它将切换其状态，因此您可以使用getCheckboxStatus函数获取其值。

否则，如果要手动设置复选框值，请使用舒适功能setCheckboxStatus，将ID（“不带＃”）传递给函数和状态（ true 或假）。

如果你想切换复选框的状态（如果为false则将其设置为true，如果为true则设置为false），使用舒适功能toggleCheckbox（传递ID，始终不带“＃”）。

在您的情况下，您必须将代码更改为（在粘贴函数之后）。

function getProjects(course){ console.log("getProjects"); var data = { "fn" : "pLoad", "course" : course, "ajax" : "true" }; $.ajax({ type: "GET", url: SERVICE_URL, //Relative or absolute path to response.php file data: data, contentType: "application/json", success: function(response) { console.log("Recieved Projects!"); console.log(response); var i, list = ""; for (i = 0; i < response.length; i++) { setCheckboxStatus(response[i].name[0], true); } } }); }

出于测试目的，我已经做到了：

http://jsfiddle.net/2gh1qfoo/5/

随时测试你需要的东西。

另一个可能的解决方案就是触发复选框上的“click”事件，但它可能在IE9上有一些奇怪的结果，所以这似乎是最清晰的跨浏览器解决方案。

使用jQuery Mobile时无法以编程方式检查复选框

1 个答案:

状态1（复选框关闭）：

状态2（复选框ON）：

解决方案