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

Question

我正在创建一个表格，我在其中添加了 jQuery 代码以添加 class 以检查 label。

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

我的 HTML 在这里：

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

它适用于单选按钮，但不适用于复选框，因为当有人再次单击并想取消选中时，不会删除 class。

所以我发现当有人点击 label 时，添加 jQuery 代码以删除 class“checkedlabel”会很好。

我怎么能用 jQuery 做到这一点？

我在 jQuery 中不太好，并尝试了一些使用代码形式 stackoverflow 但没有成功。

Answer 1

您可以使用 jQuery 的removeClass方法

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