在选择标签下选择选项时，如何过滤和显示复选框？

【问题标题】：How do I filter and show checkboxes when an option is selected under select tag?在选择标签下选择选项时，如何过滤和显示复选框？
【发布时间】：2022-01-25 09:13:54
【问题描述】：

我想在 select 中选择一个选项时过滤复选框（类似于过滤相关复选框）

<select> 
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">D</option>
   <option value="D">C</option>
<select>

<label for="1">1</label>
<input type="checkbox" value="1" for="1">
<label for="2">2</label>
<input type="checkbox" value="2" for="2">
<label for="3">3</label>
<input type="checkbox" value="3" for="3">
<label for="4">4</label>
<input type="checkbox" value="4" for="4">
<label for="5">5<label>
<input type="checkbox" value="5" for="5">

现在说如果选择了值为 A 的选项，那么我想显示复选框 3、4、5

我怎样才能做到这一点？

【问题讨论】：

可以利用下拉框的onChange事件。

标签： html jquery checkbox frontend

【解决方案1】：

对于 jquery，您可以使用.change() 事件处理程序来执行此操作。

我举个例子供你参考。

$( document ).ready(function() {
    $("#dropDown").change(function(){
      switch(this.value){
        case "A":
          $("#1").show();
          break;
      }
    });
});

span{
  display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropDown"> 
   <option value="">Please select</option>
   <option value="A">A</option>
   <option value="B">B</option>
   <option value="C">D</option>
   <option value="D">C</option>
<select>

<span id="1">
  <label for="1">1</label>
  <input type="checkbox" value="1" for="1">
</span>
<label for="2">2</label>
<input type="checkbox" value="2" for="2">
<label for="3">3</label>
<input type="checkbox" value="3" for="3">
<label for="4">4</label>
<input type="checkbox" value="4" for="4">
<label for="5">5<label>
<input type="checkbox" value="5" for="5">

【讨论】：