当人们选择下拉列表时,如果下拉列表的选定值不为空,则复选框将被自动选中。但我遇到了“sel[i] is undefined”错误。
Javascript部分:
var chk = document.getElementsByTagName("input");
var sel = document.getElementsByTagName("select");
for (var i=0; i< sel.length; i++) {
sel[i].onchange = function(){
if (sel[i].value !== ''){
chk[i].checked = true;
}
else{
chk[i].checked = false;
}
};
}
HTML 部分:
<form name="form1">
<div class="container">
<input id='checkbox_id1' name='checkbox_id1' type='checkbox' value='1' /></label>
Select
<label>
<select id="select_id1" name="select">
<option value=""></option>
<option value="111">111</option>
<option value="222">222</option>
</select>
</label>
<hr>
<input id='checkbox_id2' name='checkbox_id1' type='checkbox' value='1' /></label>
Select
<label>
<select id="select_id2" name="select">
<option value=""></option>
<option value="111">111</option>
<option value="222">222</option>
</select>
</label>
</div>
jsfiddle:http://jsfiddle.net/planetoid/GwEuu/
最佳答案
您的 i
值并不是您想象的那样,因为 for
循环在实际调用任何事件处理程序之前就已运行完成,因此 i
是 for 循环末尾的值。
要为每个事件处理程序捕获适当的 i
值,您可以使用像这样的自执行函数,该函数在每个特定事件处理程序的闭包中捕获它:
var chk = document.getElementsByTagName("input");
var sel = document.getElementsByTagName("select");
for (var i = 0; i < sel.length; i++) {
(function(i) {
sel[i].onchange = function(){
chk[i].checked = sel[i].value !== '';
}
})(i);
}
工作演示:http://jsfiddle.net/jfriend00/yds6w/
仅供引用,我还简化了 .checked
赋值代码。
但是,在稍微查看了您的代码之后,我相信这可能是一种更好的实现方式,不需要自执行函数。它不依赖于完全并行的复选框和输入标记数组,而是将选择的 ID 转换为相应复选框的 ID,并使用 this
来引用选择元素。因此,i
未在事件处理程序中使用。
var sel = document.getElementsByTagName("select");
for (var i = 0; i < sel.length; i++) {
sel[i].onchange = function(){
var checkboxId = this.id.replace("select_", "checkbox_");
document.getElementById(checkboxId).checked = this.value !== '';
}
}
关于javascript - 选择下拉列表,如果下拉列表的选定值不为空,则自动选中复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10265042/