Question

我试图根据Jquery中的选择值隐藏复选框。例如，如果用户选择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>

JQuery的：

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

     });

 });

JSFiddle Link：

http://jsfiddle.net/ffs408u6/4/

Answer 1

我建议您将每个label / checkbox放在div的{{1}}中，该select的数据属性与<div data-id="1"> <label for="id_checkbox_0"> <input id="id_checkbox_0" name="checkbox" type="checkbox" value="1" /> 1 </label> </div>的值相对应：

$("#dropdown").change(function() {
    var index = $(this).val();
    $("[data-id]").show();
    $("[data-id=" + index + "]").hide();
    $('#checkbox').show();
 });

然后让你的jQuery看起来像这样：

{{1}}

Fiddle here

Answer 2

我建议，虽然你已经接受了答案：

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

如果你想隐藏父，标签，元素（包括子输入）：

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

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

2 个答案: