Question

我的任务是在多个div中设置一个复选框。选中该复选框后，我想隐藏div。我想使用Jquery来实现此功能。我觉得我很亲密，但缺少必要的东西。

这是我的代码，非常感谢任何帮助。

谢谢，

ROKA

<div id='legGroup1' class="elementGroup">
    <input type="checkbox" class="delCheck" id="1" />Delete</label>
</div>

<div id='legGroup2' class="elementGroup">
    <input type="checkbox" class="delCheck" id="2" />Delete</label>
</div>

<button type='button' id='removeLeg'></button>

$("#removeLeg").click(function (e) {
    $('.delCheck').each(function () {
        if (this.id.prop('checked')) {
            $("#legGroup" + this.id).hide();
        }
    });
});

Answer 1

您只需找到父元素：

$("#removeLeg").click(function() {
    $('.delCheck:checked').each(function() {
    //          ^^^^^^^^ -> look it filters only checked elements

        $(this).parent().hide();

    });
});

或者，更准确，使用最接近的方法：

$(this).closest('.elementGroup').hide();

Answer 2

由于您使用的是each函数，因此请根据函数返回的数组中的项的值来确定它。

$("#removeLeg").click(function (e) {    
    $('.delCheck').each(function (key, value) {
       if ($(value).is(':checked')) {
           $(value).parent().hide();
       }
    });
});

Answer 3

首先，您在HTML中缺少一个开放的label标记。

<label><input type="checkbox" class="delCheck" id="1" />Delete</label>

对于click事件，你可以尝试这个，遍历每个选中的复选框并隐藏它们最近的div父级。

$(document).ready(function(){
    $('#removeLeg').on('click', function(){
        $('.delCheck:checked').each(function(){
            $(this).parents('div').hide();
        });
    });
});

以下是演示：https://jsfiddle.net/nx9e1yp5/1/

JQuery循环遍历多个输入复选框

3 个答案: