基于Jquery中下拉选择的动态复选框

我试图根据Jquery中的select值隐藏复选框。例如，如果用户选择1，则会隐藏复选框1，以此类推

谢谢

HTML:

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

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

 $( document ).ready(function() {  
    $('#checkbox').hide();
    $("#dropdown").change(function() {
        $('#checkbox').show();
        var index = $(':selected', this).index();
        $('input:(#id_checkbox_'+index+')').hide(); 
        $('input:not(#id_checkbox_'+index+')').show();

     });

 });

jsiddle链接：

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

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

 $( document ).ready(function() {  
    $('#checkbox').hide();
    $("#dropdown").change(function() {
        $('#checkbox').show();
        var index = $(':selected', this).index();
        $('input:(#id_checkbox_'+index+')').hide(); 
        $('input:not(#id_checkbox_'+index+')').show();

     });

 });

---

我的建议是将每个

标签

/

复选框

放在一个

div

中，该div具有与

select

值对应的数据属性：

<div data-id="1">
  <label for="id_checkbox_0">
    <input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" /> 1
  </label>
</div>

---

我建议，尽管你已经接受了答案：

var checkboxes = $(’input[type="checkbox"]').hide();
$('#dropdown').on('change', function(){
    var select = this;
    checkboxes.show().filter(function() {
        return this.value !== select.value;
    }).hide();
});

如果要隐藏父项、标签、元素（包括子输入），请执行以下操作：

您的意思是$（'input[type=“checkbox”]”）。hide（）；？这对我不起作用。