0

当人们选择下拉列表时,如果下拉列表的选定值不为空,复选框将自动选中。但我遇到了“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>&nbsp;

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>&nbsp;


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/

4

2 回答 2

2

您的值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 !== '';
    }
}

​ 工作演示:http: //jsfiddle.net/jfriend00/g3UQG/

于 2012-04-22T03:47:39.727 回答
1

我看到 jfriend00 打败了我,但你也可以使用这个语法来达到同样的效果(我也缩短了内部代码):

var chk = document.getElementsByTagName("input"),
    sel = document.getElementsByTagName("select");

for (var i=0; i< sel.length; i++) {
    sel[i].onchange = (function (i) {
        return function(){    
            chk[i].checked = sel[i].value !== '';
        };
    }(i));
}
于 2012-04-22T03:48:40.460 回答