我正在编写一个脚本,用于根据存储在数组中的值设置复选框(较大脚本的一部分,用于允许用户将表单恢复为其初始值)。代码基本上是这样的:
$("#myForm :checkbox[name='myName[]']").each(function(){
if($.inArray($(this).val(),initValues)!=-1){
$(this).prop("checked",true);
} else {
$(this).prop("checked",false);
}
});
initValues包含最初检查过的框的值属性。
脚本检查$("#myForm :checkbox[name='myName[]']")
中的第一个元素,但后续元素似乎都未选中。 Firebug显示checked
属性正在更改,但框本身未被选中。
我尝试使用attr()
代替prop()
的所有结果都有相同的结果,并且脚本在OS X上的Firefox 11.0和Chrome 18.0中的行为方式相同。
答案 0 :(得分:1)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var initValues = ['eee', 'mec', 'csc'];
$('#btnResetCheckBox').click(function () {
$('#myForm').find(':checkbox[name^="myName"]').each(function () {
$(this).prop("checked", ($.inArray($(this).val(), initValues) != -1));
});
//Or
// $('#myForm').find(':checkbox[name^="myName"]').prop('checked', false);
// $.each(initValues, function (i, val) {
// $('#myForm').find(':checkbox[name^="myName"][value="' + val + '"]').prop("checked", true);
// });
});
$('#btnResetCheckBox').trigger('click');
});
</script>
</head>
<body>
<form id="myForm" action="">
<div>
<input type="checkbox" name="myName[1]" value="eee" />eee<br />
<input type="checkbox" name="myName[2]" value="ece" />ese<br />
<input type="checkbox" name="myName[3]" value="it" />it<br />
<input type="checkbox" name="myName[4]" value="csc" />csc<br />
<input type="checkbox" name="myName[5]" value="mec" />mec<br />
</div>
<input type="button" id="btnResetCheckBox" value="Reset Check Box" />
</form>
</body>
</html>
答案 1 :(得分:0)
html属性可能会搞乱。
我建议更换:
$(this).prop("checked",true);
通过
$(this).prop("checked","checked");
或
$(this).prop("checked",false);
通过
$(this).prop("checked","");
答案 2 :(得分:0)
还有另一种方式。如果您为每个复选框提供相同的类,则实际上可以将一个数组传递给该类的.val。
jQuery(".nameInput").val(initValues);
简单,优雅且有效