Javascript jQuery:设置数组中的复选框值
我正在编写一个脚本,用于根据数组中存储的值设置复选框(这是允许用户将表单还原为初始值的较大脚本的一部分)。代码基本上是这样的:Javascript jQuery:设置数组中的复选框值,javascript,jquery,Javascript,Jquery,我正在编写一个脚本,用于根据数组中存储的值设置复选框(这是允许用户将表单还原为初始值的较大脚本的一部分)。代码基本上是这样的: $("#myForm :checkbox[name='myName[]']").each(function(){ if($.inArray($(this).val(),initValues)!=-1){ $(this).prop("checked",true); } else { $(this).prop("checked
$("#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中的表现也是一样的。
<!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>
$(文档).ready(函数(){
var initValues=['eee','mec','csc'];
$('#btnResetCheckBox')。单击(函数(){
$('#myForm')。查找(':checkbox[name^=“myName”]”)。每个(函数(){
$(this.prop)($.inArray($(this.val(),initValues)!=-1));
});
//或
//$('#myForm').find(':checkbox[name^=“myName”]').prop('checked',false);
//$.each(initValues,function(i,val){
//$('#myForm').find(':checkbox[name^=“myName”][value=“”+val+“]”).prop(“checked”,true);
// });
});
$('btnResetCheckBox')。触发器('click');
});
eee
ese
它
csc
mec
$(文档).ready(函数(){
var initValues=['eee','mec','csc'];
$('#btnResetCheckBox')。单击(函数(){
$('#myForm')。查找(':checkbox[name^=“myName”]”)。每个(函数(){
$(this.prop)($.inArray($(this.val(),initValues)!=-1));
});
//或
//$('#myForm').find(':checkbox[name^=“myName”]').prop('checked',false);
//$.each(initValues,function(i,val){
//$('#myForm').find(':checkbox[name^=“myName”][value=“”+val+“]”).prop(“checked”,true);
// });
});
$('btnResetCheckBox')。触发器('click');
});
eee
ese
它
csc
mec
如果未设置为字符串,则可以设置html属性
我建议更换:
$(this).prop("checked",true);
借
或 借
如果未设置为字符串,则html属性可能会混乱 我建议更换:
$(this).prop("checked",true);
借
或 借
还有另一种方法。如果给每个复选框指定相同的类,实际上可以将数组传递到该类的.val中
jQuery(".nameInput").val(initValues);
它简单、优雅、有效还有另一种方法。如果给每个复选框指定相同的类,实际上可以将数组传递到该类的.val中
jQuery(".nameInput").val(initValues);
它简单、优雅、实用请提供一些HTML。可能是
.val()
没有返回您期望的值。.prop()
是正确的。您的代码运行良好。您使用的是JQuery的最近版本吗?我确实考虑过,但据我所知,它是,并且<代码> $。HTML是一个庞大项目的一部分,所以在这里显示有点复杂,但我将尝试编写一个测试用例。感谢我使用jqueryv1.7.2您的示例对我来说也很有用,因为它更接近于脚本的实际实现方式。我完全被难住了。还有很多其他的事情正在进行,例如表单是页面上几个表单中的一个,它们被包含在jQuery UI选项卡中等等。我只能猜测在某个地方有一个奇怪的冲突。谢谢你的帮助。请提供一些HTML。可能是.val()
没有返回您期望的值。.prop()
是正确的。您的代码运行良好。您使用的是JQuery的最近版本吗?我确实考虑过,但据我所知,它是,并且<代码> $。HTML是一个庞大项目的一部分,所以在这里显示有点复杂,但我将尝试编写一个测试用例。感谢我使用jqueryv1.7.2您的示例对我来说也很有用,因为它更接近于脚本的实际实现方式。我完全被难住了。还有很多其他的事情正在进行,例如表单是页面上几个表单中的一个,它们被包含在jQuery UI选项卡中等等。我只能猜测在某个地方有一个奇怪的冲突。谢谢你的帮助。
jQuery(".nameInput").val(initValues);