jQuery: проблемы с определением, если установлен флажок

Question

Я создаю небольшой плагин jQuery для моей CMS, который стилизует определенные типы ввода формы (только радио, флажок на данный момент). Он работает, скрывая оригинальный элемент формы и помещая обычный элемент 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.

Я проверил, что идентификатор правильный, и это так. Я также попробовал несколько других методов, которые я наткнулся на проверку, если флажок установлен, но они либо дали тот же результат, либо потерпели неудачу вообще. (

Любая помощь будет высоко ценится. Спасибо:)

Обновление Вот 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();
    }
});

Answer 2

Я обнаружил в странном случае, что мне нужно использовать альтернативу:

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

Это может быть или не быть альтернативой в вашем сценарии, но стоит отметить.Кроме того, вам может потребоваться добавить «живое» событие, а не «щелкнуть», если происходят изменения в DOM.то есть

.click(function()

до

.live('click', function()

Джим

Answer 3

Атрибут checked флажка сопоставлен со свойством defaultChecked, а не со свойством checked.Вместо этого используйте метод prop().

Если elem является флажком, используйте:

elem.checked

или

$(elem).prop("checked")

Это дает нам правильную информацию о состоянии флажка и изменяется как состояниеИзменения.

Это, кажется, причина путаницы во многих случаях.Так что хорошо иметь в виду основную причину этого.

Answer 4

Не могли бы вы показать нам HTML? Я смотрю, если вы установите значение свойства для флажка в HTML. Есть вероятность, что это сломало.

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