jquery - Jquery 目标父级上两级复选框

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，我想遍历 dominput:checkbox并选中/取消选中该复选框。

以下代码不起作用：

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

我不能只使用/定位“checkbox-msg”的类名，因为页面上还有其他类。

如何将 parent > parent 定位到复选框？

Answer 1

您可以使用任何适合您的选项，您可以使用它.siblings()来选中和取消选中：.closest().prop()

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

或者

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

在这里找出两者

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