Javascript 通过Jquery中的下拉输入动态更新复选框选项

我试图通过下拉输入动态更新复选框选项。例如，如果用户选择1，则复选框1不会出现，但其余复选框会出现，依此类推

HTML

<tr><th><label for="dropdown">Dropdown:</label></th><td><select id="dropdown" name="dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>

</select></td></tr>

<li><label for="id_checkbox_0"><input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" /> 1</label></li>
<li><label for="id_checkbox_1"><input id="id_checkbox_1" name="checkbox" type="checkbox" value="2" /> 2</label></li>
<li><label for="id_checkbox_2"><input id="id_checkbox_2" name="checkbox" type="checkbox" value="3" /> 3</label></li>
<li><label for="id_checkbox_3"><input id="id_checkbox_3" name="checkbox" type="checkbox" value="4" /> 4</label></li>

下面是JSIDLE链接：

---

谢谢

您可以这样做：

$("#dropdown").change(function() {

     var index = $(':selected', this).index();
     $('#id_checkbox_'+index).parents('li').hide();
     $('input:not(#id_checkbox_'+index+')').parents('li').show();

 });

这将隐藏相应的复选框，并显示其他不匹配的复选框。请注意，使用parents（'li'）选择

元素将隐藏整个列表项，而不仅仅是复选框

小提琴：

您可以使用

最近的（）

并隐藏特定的

li

：

$("#dropdown").change(function() {
    $("li").show(); // show all
    var index = $(':selected', this).index();
    $('#id_checkbox_'+index).closest("li").hide(); // hide which matches the selector

 });

更新小提琴：

---

html无效，

li

必须有合适的父级，

ul

或

ol

这就是我要找的。谢谢

$("#dropdown").change(function() {
    $("li").show(); // show all
    var index = $(':selected', this).index();
    $('#id_checkbox_'+index).closest("li").hide(); // hide which matches the selector

 });