我一直在尝试使用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");
}
}
});
}
字符串
超文本标记语言:
<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。这里的目标是,当我点击一个“课程”时,脚本将选中该课程所属项目的每个复选框。
日志告诉我服务器返回了正确的项目。
为什么不管用?
编辑
这是日志:
的数据
<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>
型
1条答案
按热度按时间x7yiwoj41#
经过以上评论,结论是:
字符串
如果它不起作用,并且您正在使用jQuery 1.6以下版本,请尝试:
型
或
型
如果它不起作用(虽然它应该),就用纯js:
型
编辑
现在,OP提出这样一个问题是完全正确的,这就是为什么:
使用jQuery移动的1.4.4和jQuery 1.11.0*,jQuery移动的编译器完全改变了文档的HTML结构!
简而言之,问题在于:
街区:
型
翻译成:
型
现在,经过一些测试,你不能经常切换输入值,因为事实上,该复选框的样式是css相关的,而不是html或js相关的。
简而言之,基本上有两种状态:
状态1(复选框OFF):
型
它被渲染为这样的东西(在一个基本的小提琴):
x1c 0d1x的数据
状态2(复选框ON):
型
它被渲染为这样的东西(在一个基本的小提琴):
的
正如你所看到的,复选框没有任何状态,它的行为与它的属性“checked”没有任何关系。
为了解决这个问题,你必须做一些事情。
解决方案
现在,在继续之前,我想首先解释一个考虑因素:
因为你可能想,在未来(或者.嗯.也许只是现在!)获取该复选框的BOOLEAN值,我们将检查它并更改其checked属性。这是因为如果你实际上只是为jQuery移动的UI设置它为checked,如果你试图获取它的“checked属性”,它将不会被选中。
接下来,我实现了以下函数,以给予您一种更舒适的方式来使用该UI:
型
令人惊讶的是,如果您手动单击复选框,它将切换其状态,因此您可以使用getCheckboxStatus函数获取其值。
否则,如果您想手动设置复选框值,请使用舒适函数setCheckboxStatus,将ID(“不带#”)传递给函数和状态(true或false)。
如果你想切换一个复选框的状态(如果为false,则将其设置为true,如果为true,则将其设置为false),使用舒适功能toggleCheckbox(传递ID,始终不带“#”)。
在你的情况下,所以,你将不得不改变你的代码(粘贴函数后)。
型
为了测试的目的,我做了这个:
http://jsfiddle.net/2gh1qfoo/5/
你可以随意测试你需要的东西
另一种可能的解决方案是只是触发复选框上的“点击”事件,但在IE9上可能会有一些奇怪的结果,所以这似乎是最清晰和跨浏览器的解决方案。