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(); 

 });

Heres 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();

 });

这会隐藏相应的复选框，并显示其他不匹配的复选框。请注意，使用父母选择

元素（＆＃39; li＆＃39;）将隐藏整个列表项，而不仅仅是复选框。

小提琴：http://jsfiddle.net/5oedargs/

Answer 2

您可以使用closest()并隐藏特定的li：

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

 });

更新的FIDDLE：

http://jsfiddle.net/ffs408u6/1/

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

2 个答案:

更新的FIDDLE：