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

Question

我正在尝试通过下拉输入动态更新复选框选项。例如，如果用户选择 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>

JQuery

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

         var index = $(':selected', this).index();
         $('#id_checkbox_'+index).parent().hide(); 

 });

这里是 JSFiddle 链接:

http://jsfiddle.net/ffs408u6/

谢谢!

Answer 1

你可以这样做:

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

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

 });

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

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

fiddle :http://jsfiddle.net/5oedargs/