如何实现勾选checkbox时显示select下拉框，未勾选时隐藏

直接通过原生JS监听复选框状态即可实现需求，不需要额外依赖框架。 #

完整实现代码 #

先修复原代码的基础问题：原label的for属性没有对应input的id，会导致点击label无法选中复选框；给需要控制的select加标识，初始设置为隐藏。

<label for="webcam">Webcam*</label>
<input type="checkbox" id="webcam" name="webcam" value="checkbox">
<select id="webcamSelect" style="display: none;">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<script>
const checkbox = document.getElementById('webcam')
const select = document.getElementById('webcamSelect')

checkbox.addEventListener('change', () => {
  select.style.display = checkbox.checked ? 'block' : 'none'
})
</script>

可选优化 #

• 如果不想要内联样式，可以单独定义CSS类控制显隐：

.hidden {
  display: none;
}

把JS里的样式修改换成select.classList.toggle('hidden', !checkbox.checked)即可，维护性更好。

• 如果需要在复选框未勾选时不让下拉菜单的值随表单提交，可以在隐藏的时候给select加disabled属性，显示的时候移除即可。

内容的提问来源于stack exchange，提问作者ahmet yılmaz234