Question

我在尝试访问高于我的范围几个级别的复选框时遇到问题。

<div class="control-group">
<input type="checkbox" name="employed_now" id="employed_now" class="checkbox-msg"/>
<label><span class="label label-success checkbox-msg">Yes</span>employed_now</label>

点击span.checkbox-msg后，我想将dom遍历到input:checkbox并选中/取消选中该复选框。

以下代码不起作用：

    $(document).on('click', 'span.checkbox-msg', function (e) {
        e.preventDefault();
        $(this).parent().find('input:checkbox').attr('checked','checked');
    });

由于页面上还有其他类，因此我不能仅使用/ target作为“checkbox-msg”的类名。

如何定位父母＆gt;父级复选框？

Answer 1

您可以使用.siblings()和.closest()以适合您的方式使用.prop()来检查和取消选中：

$(this).parent().siblings('input:checkbox').prop('checked', true);

或

$(this).closest('.control-group').find('input:checkbox').prop('checked', true);

Findout both here

Answer 2

你可以这样做：

    $(document).on('click', 'span.checkbox-msg', function (e) {
        e.preventDefault();
        $('input:checkbox', $(this).closest('div')).attr('checked','checked');
    });

但您可以在for='employed_now'添加<label>属性，并且在没有jquery的情况下具有相同的功能。

Answer 3

试试这个：

$(document).on('click', 'span.checkbox-msg', function (e) {
    e.preventDefault();
    $(this).before('input:checkbox').prop('checked',true);
});

Jquery目标父级两级复选框

3 个答案: