jQuery:检测是否选中了复选框时出现问题

Question

我正在为我的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.


        });
    });
};

这对于收音机非常有用,但是当第二次单击复选框标签时复选框似乎卡住了 - 标签的第一次单击成功将其更改为适当的状态,但再次单击标签不会更改它(但是复选框本身仍然可以正常工作).它在IE8中完美运行.

我检查过id是否正确,确实如此.我还尝试了一些其他方法,我偶然发现是否选中了复选框,但它们要么得到相同的结果,要么完全失败.:(

任何帮助将非常感激.谢谢 :)

更新 这是HTML,它由PHP类生成.这是在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>

Answer 1

只需使用绝对可靠且极其简单的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.
    }
});

UPDATE

单击<label>与复选框关联的元素的默认操作是切换复选框的选中.我自己没有尝试使用隐藏表单元素的标签,但也许切换仍在发生,因为您没有阻止浏览器的默认点击操作.请尝试以下方法:

//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();
    }
});