JQuery - 输出选中复选框的类名答案

【问题标题】：JQuery - Output the class name of checked checkboxesJQuery - 输出选中复选框的类名
【发布时间】：2012-02-11 11:14:45
【问题描述】：

我想知道是否可以在每次选中/取消选中复选框时输出选中复选框的类名？例如，我有 3 个复选框。如果我选中一个，它将输出其类名，如果我再选中第二个，它将输出第一个复选框类名+第二个类名。如果我然后取消选中第一个复选框，它只会输出第二个复选框的类名..等等？我做了一个 JSFiddle 来开始使用...http://jsfiddle.net/LUtJF/

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$("input[type='checkbox']").change(function() {
    var classes = $("input[type='checkbox']:checked").map(function() {
        return this.className;
    }).get().join(",");
    alert(classes);
});

Your fiddle, fiddled with.

【讨论】：

【解决方案2】：

检查这个小提琴：http://jsfiddle.net/eUse5/

代码：

function showChecked() {
    var s = '';
    $('input:checked').each(function() {
        if(s!='') s += ', ';
        s += $(this).attr('class');
    });
    alert(s);
}
$('input[type="checkbox"]').change(showChecked);

【讨论】：

【解决方案3】：

$(document).ready(function() {
    var cb = $('input[type=checkbox]');
    cb.change(function() {
        cb.each(function() {
            if ($(this).is(':checked')) {
                alert($(this).attr('class'));
            }  
        });
    });
});

【讨论】：

【解决方案4】：

可以这样做

$(":checkbox").click(function(){
    var classes = "";
    $(':checked[class]').each(function(){ // this will filter only checked checkbox having class attribute
       classes += " "+$(this).attr("class");
    });
    alert(classes);
});

小提琴：http://jsfiddle.net/LUtJF/7/

【讨论】：