Javascript jQuery：检测复选框是否被选中的问题

我正在为我的CMS创建一个小的jQuery插件，用于设置某些表单输入类型的样式（目前只需设置收音机、复选框）。它的工作原理是隐藏原始表单元素并将一个普通HTML元素（用于CSS样式）放置在输入的位置。然后，它检测元素上的操作并相应地更新原始输入。此外，单击关联的标签时，它也会起作用。这是我的密码：

jQuery.fn.ioForm = function() {
    return this.each(function(){
        //For each input element within the selector.
        $('input', this).each(function() {
            var type = $(this).attr('type');

            //BOF: Radios and checkboxes.
            if (type == 'radio' || type == 'checkbox') {
                var id = $(this).attr('id');
                checked = '';

                if ($(this).attr('checked')) {
                    checked = 'checked';
                }

                //Add the pretty element and hide the original.
                $(this).before('<span id="pretty_'+ id +'" class="'+ type +' '+ checked +'"></span>');
                $(this).css({ display: 'none' });

                //Click event for the pretty input and associated label.
                $('#pretty_'+ id +', label[for='+ id +']').click(function() {
                    if (type == 'radio') {
                        //Radio must uncheck all related radio inputs.
                        $(this).siblings('span.radio.checked').removeClass('checked');
                        $(this).siblings('input:radio:checked').removeAttr('checked');

                        //And then check itself.
                        $('#pretty_'+ id).addClass('checked');
                        $('#'+ id).attr('checked', 'checked');
                    } else if (type == 'checkbox') {
                        if ($('#'+ id).attr('checked')) {
                            //Checkbox must uncheck itself if it is checked.
                            $('#pretty_'+ id).removeClass('checked');
                            $('#'+ id).removeAttr('checked');
                        } else {
                            //Checkbox must check itself if it is unchecked.
                            $('#pretty_'+ id).addClass('checked');
                            $('#'+ id).attr('checked', 'checked');
                        }


                    }
                });
            } //EOF: Radios and checkboxes.


        });
    });
};

jQuery.fn.ioForm=function（）{
返回此值。每个（函数（）{
//对于选择器中的每个输入元素。
$（'input'，this）.each（函数（）{
var type=$（this.attr（'type'）；
//BOF：收音机和复选框。
如果（类型=='radio'| |类型=='checkbox'）{
var id=$（this.attr（'id'）；
选中=“”；
if（$（this.attr（'checked'））{
checked=‘checked’；
}
//添加pretty元素并隐藏原始元素。
$（本）。在（''）之前；
$（this.css（{display:'none'}）；
//单击事件以获取漂亮的输入和关联的标签。
$（“#pretty”+id+”，标签[for=“+id+]”）。单击（函数（）{
如果（类型=='radio'）{
//收音机必须取消选中所有相关的收音机输入。
$（this）.sides（'span.radio.checked'）.removeClass（'checked'）；
$（this）.sides（'input:radio:checked'）。removeAttr（'checked'）；
//然后检查自己。
$（'#pretty'+id）.addClass（'checked'）；
$（'#'+id）.attr（'checked'，'checked'）；
}else if（类型=='checkbox'）{
if（$（'#'+id）.attr（'checked'））{
//如果复选框已选中，则必须取消选中它本身。
$（'#pretty'+id）.removeClass（'checked'）；
$（'#'+id）.removeAttr（'checked'）；
}否则{
//如果复选框未选中，则必须选中它本身。
$（'#pretty'+id）.addClass（'checked'）；
$（'#'+id）.attr（'checked'，'checked'）；
}
}
});
}//EOF：收音机和复选框。
});
});
};

这对收音机非常有效，但是当第二次单击复选框标签时，复选框似乎卡住了-第一次单击标签成功地将其更改为适当的状态，但再次单击标签不会更改它（但是复选框本身仍然可以正常工作）。它在IE8中工作得非常好

我已经检查了身份证是否正确，是否正确。我还尝试了一些我偶然发现的检查复选框是否被选中的其他方法，但它们要么给出相同的结果，要么完全失败(

任何帮助都将不胜感激。 谢谢：）

更新 下面是由PHP类生成的HTML。这是在jQuery运行并添加到span元素之后：

<div>
    <p class="label">Test:</p>
    <span id="pretty_test_published_field" class="checkbox"></span>
    <input class="checkbox" id="test_published_field" name="test" type="checkbox" value="published">
    <label for="test_published_field" class="radio">Published</label>
    <span id="pretty_test_draft_field" class="checkbox"></span>
    <input checked="checked" class="checkbox" id="test_draft_field" name="test" type="checkbox" value="draft">
    <label for="test_draft_field" class="radio">Draft</label>
</div>

测试：
出版
草稿

我在奇数账户中发现，我需要使用以下替代方案：

$("#checkboxID").is(':checked');

在您的场景中，这可能是一个替代方案，也可能不是，但值得注意。此外，如果dom发生更改，您可能必须添加“live”事件，而不是“click”。i、 e

.click(function()

到

---

jim

只需使用无误且极其简单的DOM

checked

属性即可。jQuery不适合这样做，而且显然是最简单的JavaScript任务之一，容易出错且容易混淆。这也适用于

id

和

type

属性

$('input', this).each(function() {
    var type = this.type;
    if (type == 'radio' || type == 'checkbox') {
        var id = this.id;
        var checked = this.checked ? 'checked' : '';

        // Etc.
    }
});

更新

单击与复选框关联的

元素的默认操作是切换复选框的选中状态。我自己还没有尝试过隐藏表单元素的标签，但可能切换仍在进行，因为您没有阻止浏览器的默认单击操作。请尝试以下操作：

//Click event for the pretty input and associated label.
$('#pretty_'+ id +', label[for='+ id +']').click(function(evt) {
    if (type == 'radio') {
        //Radio must uncheck all related radio inputs.
        $(this).siblings('span.radio.checked').removeClass('checked');
        $(this).siblings('input:radio:checked').each(function() {
            this.checked = false;
        });

        //And then check itself.
        $('#pretty_'+ id).addClass('checked');
        $('#'+ id)[0].checked = true;

        evt.preventDefault();
    } else if (type == 'checkbox') {
        if ($('#'+ id).attr('checked')) {
            //Checkbox must uncheck itself if it is checked.
            $('#pretty_'+ id).removeClass('checked');
            $('#'+ id)[0].checked = false;
        } else {
            //Checkbox must check itself if it is unchecked.
            $('#pretty_'+ id).addClass('checked');
            $('#'+ id)[0].checked = true;
        }

        evt.preventDefault();
    }
});

---

你能给我们看看HTML吗？我想看看您是否为HTML中的复选框设置了value属性。有可能是它坏了

<input type="checkbox" value="This May Break Checkbox" />
<input type="checkbox" name="This Checkbox Works" />

---

复选框的

checked

属性映射到

defaultChecked

属性，而not映射到

checked

属性。改用

prop（）

方法

如果复选框为

elem

，请使用：

elem.checked

或

这为我们提供了复选框的正确状态信息，并随着状态的变化而变化

---

这似乎是在许多情况下造成混乱的原因。因此，最好记住这背后的根本原因。

只是尝试了一下，没有什么不同。问题似乎在于它要么没有更新已检查状态，要么没有检测到它。我也使用了jim建议的live now，但这也没什么区别。如果有区别，选中的属性不会在Chrome开发工具的元素显示中出现或消失。如果我将原始复选框显示在我的“漂亮”复选框旁边，它仍然与“漂亮”复选框完全相同地选中/取消选中。而且，这个问题似乎是在我将其转换为jQuery函数后才开始出现的。太棒了！阻止默认事件成功了：D现在看起来也很明显。谢谢！：）不幸的是，两者都没有产生任何影响（将HTML添加到我的原始问题中。它确实有一个值集，因为它来自一个PHP类。我现在已经更改了该类，因此它不再为复选框添加值。尽管没有更改。：（但是，当单击标签时，复选框本身（用于测试的复选框旁边显示）没有更改，而是“漂亮”其中一个在卡住之前更新一次（因为复选框实际上没有被选中/取消选中）

elem.checked

$(elem).prop("checked")