CODEWITHSUNDEEP
javascript
Planetoid Hsu
Planetoid Hsu

Reputation: 47

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

When people selected the dropdown and then the checkbox will be auto checked if the selected value of dropdown is not empty. But I met "sel[i] is undefined" error.

Javascript part:

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 part:

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

Upvotes: 0

Views: 4371

Answers (2)

jfriend00
jfriend00

Reputation: 707326

Your value of i is not what you think it is because the for loop has run to completion before any of the event handlers are actually called, thus i is the value at the end of the forloop.

To capture the appropriate value of i for each event handler, you can use a self executing function like this that captures it in a closure for each specific event handler:

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

Working demo: http://jsfiddle.net/jfriend00/yds6w/

FYI, I've also simplified the .checked assignment code.

But, after looking at your code a bit, I believe this may be a better way of implementing it that doesn't need the self executing function. Rather than rely on perfectly parallel arrays of checkboxes and input tags, this just converts the ID of the select to the ID of the corresponding checkbox and uses this to reference the select element. So, i is not used in the event handler.

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

​ Working demo: http://jsfiddle.net/jfriend00/g3UQG/

Upvotes: 2

Brett Zamir
Brett Zamir

Reputation: 14345

I see jfriend00 beat me to it, but you can also use this syntax to achieve the same effect (I also shortened the inner code):

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

Upvotes: 1

Related Questions