时间戳

首页 > 解决方案 > 选择 $this div 类

javascript - 选择 $this div 类

问题描述

我尝试从中选择“复选框组”$this元素中选择“复选框组”，因为在表单中我可以有很多复选框组。

实际上我在 jQuery 中这样做是为了显示错误消息。

$(document).delegate("input[type=checkbox]", "click", function()
{
    $(".required_custom").remove();

    if(!$(this).prop('required') && !$(this).is(':checked')){
        $('.checkbox-group').after('<br class="required_custom" ><span class="required_custom" style="color:red">Au moins une case doit être coché</span>');
    }
});

但是使用此代码，我将向其他一些复选框组显示此错误消息。

如何使用“after”方法来仅选择$thischeckbox-group ？

提前致谢。我的 html 看起来像这样，示例中只有一个复选框组，但正如我之前所说，我可以有很多其他的。

<div class="checkbox-group">
    <div class="checkbox">
        <input name="checkbox-group-1547545912597[]" id="checkbox-group-1547545912597-0" aria-required="true" value="1" type="checkbox" class="user-error" required="required" aria-invalid="true">
        <label for="checkbox-group-1547545912597-0">Option 1</label></div><div class="checkbox"><input name="checkbox-group-1547545912597[]" id="checkbox-group-1547545912597-1" aria-required="true" value="2" type="checkbox" required="required">
        <label for="checkbox-group-1547545912597-1">Option 2</label>
    </div>
</div>

标签： javascriptjquery

解决方案

this您可以使用jQuery的parents()方法选择父级：

$(this).parents('.checkbox-group').after('<br class="required_custom" ><span class="required_custom" style="color:red">Au moins une case doit être coché</span>');


$(document).delegate("input[type=checkbox]", "click", function() {
    $(".required_custom").remove();
    
    if(!$(this).prop('required') && !$(this).is(':checked')){
        
        $(this).parents('.checkbox-group').after('<br class="required_custom" ><span class="required_custom" style="color:red">Au moins une case doit être coché</span>');
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox-group">
    <div class="checkbox">
        <input name="checkbox-group-1547545912597[]" id="checkbox-group-1547545912597-0" aria-required="true" value="1" type="checkbox" class="user-error" required="required" aria-invalid="true">
        <label for="checkbox-group-1547545912597-0">Option 1</label></div><div class="checkbox"><input name="checkbox-group-1547545912597[]" id="checkbox-group-1547545912597-1" aria-required="true" value="2" type="checkbox" required="required">
        <label for="checkbox-group-1547545912597-1">Option 2</label>
    </div>
</div>

推荐阅读