使用jQuery将toggleClass添加到复选框中

Add toggleClass to a Checkbox with jQuery

本文关键字：复选框 添加 toggleClass jQuery 使用      更新时间：2023-09-26

当input="checkbox"被选中时，我如何将toggleClass（）应用于它？当选中时，我正在尝试添加类"calcButtonOn"：

jQuery(function() {
    var total = 0;
    jQuery("input").click(function() {
        total = 0;
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });
});

使用JQuery选中所有复选框，并在change事件上添加一个事件处理程序：

jQuery("input[type=checkbox]").change(function(){
    jQuery(this).toggleClass("calcButtonOn", this.checked);
});

示例JSFiddle

我建议，假设您希望在检查元素时显示该类，并在随后取消检查元素时删除该类：

jQuery('input[type=checkbox]').on('change', function () {
    $(this).toggleClass('active', this.checked);
});


jQuery('input[type=checkbox]').on('change', function () {
  $(this).toggleClass('active', this.checked);
});
input {
  display: block;
  padding: 0.5em;
  margin: 0 0 1em 0;
  box-shadow: none;
}
input.active {
  box-shadow: 0 0 1em 0.25em #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

如果您的任何复选框在页面加载时被选中（例如，通过checked属性），那么值得进一步链接change()方法（不带函数回调）以触发事件：

jQuery('input[type=checkbox]').on('change', function () {
    $(this).toggleClass('active', this.checked);
}).change();


jQuery('input[type=checkbox]').on('change', function () {
  $(this).toggleClass('active', this.checked);
}).change();
input {
  display: block;
  padding: 0.5em;
  margin: 0 0 1em 0;
  box-shadow: none;
}
input.active {
  box-shadow: 0 0 1em 0.25em #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="checkbox" />

参考文献：

  • 属性等于（[attribute=value]）选择器
  • change()
  • on()
  • toggleClass()

使用：

  $(".Your_Checkbox_Class")each(function(){
     if ($(this).is(':checked') ){
        $(this).toggleClass("Your_New_Class");
    } 
  });

解释：遍历所有复选框（希望你已经像我上面给出的那样给它们Class）。然后检查它是否被选中，如果是，切换类。

编辑

你的问题不是百分之百清楚。但如果您希望事件只点击一个复选框并只切换该复选框，则使用

  $(".Your_Checkbox_Class").click(function(){
     var id = $(this).attr("id");
        $("#"+id).toggleClass("Your_New_Class");
  })

说明：如果复选框被选中，则切换类。我假设您在DOM加载上有适当的类。就像在加载DOM之后，如果已经勾选了一个复选框（来自服务器端），那么它就已经有了checked_element的类。

相关文章：