Question

如果检查了输入=“复选框”，我如何将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 + "%");
    });

});

Answer 1

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

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

Example JSFiddle

Answer 2

使用：

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

说明：循环通过所有复选框（希望你给我们上面给出的类）。然后检查是否检查了它，如果是，则切换类。

修改

你的问题不是100％清楚。但是，如果您只想点击一个复选框并仅切换该复选框，则使用

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

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

Answer 3

我建议，假设您希望在检查元素时让类存在，并在随后取消选中该元素时将其删除：

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-equals ([attribute=value]) selector。
change()。
on()。
toggleClass();

使用jQuery将toggleClass添加到Checkbox

3 个答案: