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あなたが思っているものではなく、ループの最後の値です。 forifor

各イベント ハンドラーの適切な値を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、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/

于 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 に答える