如何从 label 复选框中删除 class 点击使用 jQuery

Question

im creating a form where i added jQuery code to add class to checked label.

<script> 
jQuery(document).on("change","input", function(){
if(jQuery(this).is(":checked")) jQuery(this).closest("label").addClass("checkedlabel");
}); 
</script>

My HTML is here:

<div class="frm_checkbox" id="frm_checkbox_111-1"><label for="field_60ao4-1" class="checkedlabel"> 
<input type="checkbox" name="item_meta[111][]" id="field_60ao4-1" value="Jem o późnych porach" data- 
invmsg="Które stwierdzenia dotyczą ciebie is invalid"> Jem o późnych porach</label></div>

It works good for Radio buttons but not so good for checkboxes, because class is not removed when someone click again and want to uncheck.

So i figured out it will be good to add jQuery code to remove class "checkedlabel" when someone click on label.

How can i do this with jQuery?

Im not so good in jQuery and tried some using code form stackoverflow but without success.

Answer 1

You can use jQuery's removeClass method

   <script> 
   jQuery(document).on("change","input", function(){
    if(jQuery(this).is(":checked")){ 
      jQuery(this).closest("label").addClass("checkedlabel");
    }
    else {
      jQuery(this).closest("label").removeClass("checkedlabel");
    }
   }); 
   </script>

Answer 2

 // lets define a variable for DOM Element having id `my-checkbox` const myCheckbox = $("#my-checkbox"); // listen for click event on `myCheckbox` myCheckbox.on("click", function(clickEvent) { // Note:: // $(this) is myCheckbox // $(this).parent() is its immediate parent element, in this case - div with class `form-control` // $(this).closest('form') is closest nth-parent in the hierarchy of html tag `form` (if there are multiple forms in the parent hierarchy, it gets the nearest one from the target `myCheckbox`) // $(this).parent().find("label[for='my-checkbox']") is its sibling having tag `label` with attribute `for='my-checkbox'` const label = $(this).parent().find("label[for='my-checkbox']"); // now check if `myCheckbox` is checked if (myCheckbox.is(":checked")) { label.addClass("checked-level"); } else { label.removeClass("checked-level"); } });

 .checked-level { color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="form-control"> <!-- This parent of target element --> <label for="my-checkbox">Label</label> <!-- This is sibling to the target element --> <input type="checkbox" name="somename" id="my-checkbox" /> <!-- This is our target element --> </div> </form>