Question

我尝试从$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>');
    }
});

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

如何仅使用$this复选框组才能使用“之后”方法？

先谢谢了。在示例中，我的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>

Answer 1

您可以使用jQuery的this方法选择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>

Answer 2

您可以在此处尝试以下代码：

$(document).delegate("input[type=checkbox]", "click", function()
{
    

    if(!$(this).prop('required') || !$(this).is(':checked')){
        $(this).addClass('error').next('label').addClass('error');
        
    }else {
       $(this).removeClass('error').next('label').removeClass('error');    
    }
});

.error {
    color: red;
}

<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>

选择$ this div类

2 个答案: