选择下拉列表，如果下拉列表的选定值不为空，则自动选中该复选框

Select dropdown and auto check the checkbox if the selected value of dropdown is not empty

本文关键字：下拉列表 复选框 如果 选择      更新时间：2023-09-26

当人们选择下拉列表时，如果下拉列表的选定值不为空，则将自动选中复选框。但是我遇到了"sel[i]未定义"错误。

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;
    }
  };
}

网页部分：

<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/

你的 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分配代码。

但是，在稍微看了一下你的代码之后，我相信这可能是一种更好的实现它的方法，不需要自执行函数。 这不依赖于复选框和输入标签的完美并行数组，而是将 select 的 ID 转换为相应复选框的 ID，并使用 this 来引用 select 元素。 因此，事件处理程序中不使用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/

我看到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));
}
相关文章：