Select $this div class

Question

I try to select the "checkbox-group" from $this element because in the form I could have many checkbox-group.

Actually I'm doing this in jQuery in order to display an error message.

$(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>');
    }
});

But with this code I'm displaying this error message to some others checkbox-group.

How can I use the "after" method in order to select only $this checkbox-group ?

Thanks in advance. My html look like this with just one checkbox-group in the example but as I said before I could have many others.

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

Possible duplicate of [How to find a parent with a known class in jQuery?](https://stackoverflow.com/questions/5333426/how-to-find-a-parent-with-a-known-class-in-jquery) — Chirag Ravindra, Jan 15 '19 at 11:22
You can use the answers to the question in my previous comment to query for a parent of the clicked checkbox (`$(this)`) with the class `checkbox-group` using some thing like `$(this).closest('.checkbox-group')` or `$(this).parents('.checkbox-group')` — Chirag Ravindra, Jan 15 '19 at 11:25

Matt · Accepted Answer · 2019-01-15T11:26:48.147

You can select the parent of this using jQuery's parents() method:

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

score 0 · Answer 2 · answered Jan 15 '19 at 11:35

You Can try this code here:

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

code only answers aren't answers IMO - add some explanation so OP can learn the cause/solution and understand it all :) — treyBake, Jan 15 '19 at 11:37
this is simple logic when a user click a checkbox then the execute if condition, when if condition true then add a class instant click checkbox otherwise work reverse — Md. Abu Sayed, Jan 15 '19 at 11:39

Select $this div class

2 Answers2