选中基于下拉列表的复选框

check checkbox based on dropdown

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

我想知道是否有办法根据下拉选择的值自动选中某些框。我一直在寻找，我似乎只能找到基于下拉列表显示或隐藏复选框的方法，但这不是我想要的。

你可以用jQuery很容易做到这一点。 此代码侦听带有 id="dropdown" 的下拉列表中的更改事件，并选中带有id="checkbox"复选框，如果下拉列表文本等于"foo"。

$("#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');
});

小提琴

这应该可以满足您的要求。希望对您有所帮助！

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>

不确定您的具体情况，但这可以满足您的要求，您应该能够从中获取部分来完成您的任务。

document.getElementById('changer').onchange = function(){
  var boxes = document.querySelectorAll('input[type="checkbox"]');
  for(var i=0;i<boxes.length;i++)
  {
  	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>

相关文章：