根據下拉選中複選框

Question

我想知道是否有方法根據下拉選擇的值自動檢查某些框。我一直在尋找，我似乎只能找到基於下拉菜單的SHOW或HIDE複選框，但這不是我正在尋找的。

Answer 1

你可以很容易地用jQuery來做到這一點。此代碼會從id="dropdown"的下拉菜單中偵聽更改事件，並在下拉文本等於'foo'的情況下選中id="checkbox"複選框。

$("#dropdown").change(function() { 
    if($('#dropdown :selected').text() === 'foo') $('#checkbox').prop('checked', true); 
}); 

如果要取消時，選擇再次改變盒子這樣的事情可能會更好：

$("#dropdown").change(function() { 
    var text = $('#dropdown :selected').text(); 
    $('#checkbox').prop('checked', text === 'foo'); 
}); 

Fiddle

Answer 2

這應該做你問什麼。希望能幫助到你！

function setCheckBox(value){ 
 
    var chk = document.getElementById('check1'); 
 
    chk.checked = (value != 'null'); 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <input type="checkbox" name="check1" id="check1"/>Test 1:</td> 
 
     <td> 
 
      <select id="process1" onchange="setCheckBox(this.value);"> 
 
       <option value="null">--Select Option--</option> 
 
       <option value="OptionA">Option A</option> 
 
       <option value="OptionB">Option B</option> 
 
       <option value="OptionB">Option C</option> 
 
      </select> 
 
     </td> 
 
    </tr> 
 
</table>

Answer 3

不知道你的具體情況，但這個做什麼你問，你應該能夠採取部分從它來完成你的任務。

document.getElementById('changer').onchange = function(){ 
 
    var boxes = document.querySelectorAll('input[type="checkbox"]'); 
 
    for(var i=0;i<boxes.length;i++) 
 
    { 
 
    \t boxes[i].checked = boxes[i].id == this.value; 
 
    } 
 
};

<select id='changer'> 
 
    <option>None</option> 
 
    <option value='a'>A</option> 
 
    <option value='b'>B</option> 
 
    <option value='c'>C</option> 
 
    <option value='d'>D</option> 
 
</select> 
 
<br /> 
 
<input type='checkbox' id='a' /><label for='a'>A</label><br /> 
 
<input type='checkbox' id='b' /><label for='a'>B</label><br /> 
 
<input type='checkbox' id='c' /><label for='a'>C</label><br /> 
 
<input type='checkbox' id='d' /><label for='a'>D</label>