单选按钮未设置为选中

Radio button doesn't set as checked

本文关键字:设置 单选按钮      更新时间:2023-09-26

我做了一些测试- http://magora-systems-test.esy.es/,其中一个任务是通过JavaScript(jQuery)使单选按钮静态化。我一次又一次地重新构建,但总是有一个问题:JS成功地将输入单选按钮属性设置为checked="checked",通过单击风格化的克隆,但它没有设置为chosen,并且需要的属性会话相同。我不明白为什么?

HTML:

<fieldset class="userAge">
        <div class="fieldName">
            Возраст:
        </div>
        <div class="overflow">
            <input type="radio" name="userAge" id="seventeen" title="Выберите если вы младше 17" required>
            <label for="seventeen">17 и младше</label>
            <input type="radio" name="userAge" id="eighteen" title="Выберите если вы старше 18" required>
            <label for="eighteen">18 и старше</label>
        </div>
</fieldset>

JS:

;(function($) {
    // Расширяем набор элементов jQuery новым плагином.
    $.fn.sexyElement = function() {
        // Запуск для всех инициализаций на странице.
        $(this).each(function() {
            var element = $(this);
            // RADIO
            else if (element.is(':radio')) {
                // Для всех существующих радио кнопок.
                element.each(function() {
                        // Создание и обработка радио кнопок.
                        var createRadio = function(){
                            var sexyRadio = '<div class="radio" title="' + element.attr('title') + '">'
                                                <div class="dot">'
                                                </div>'
                                            </div>';
                            element.before(sexyRadio);
                        }
                        // Запуск функции.
                        createRadio();
                });
                // Определяем основные элементы.
                var commonParent = element.parents().eq(0),
                    buttons = commonParent.find(':radio');
                // Обработка щелчка мыши.
                $('.radio').click(function() {
                    $(this).addClass('checked').siblings().removeClass('checked');
                    buttons.attr('checked', false);
                    $(this).next(':radio').attr('checked', true);
                    buttons.change();
                });
            }
            // END RADIO
            // В противном случае.
            else {
                alert('Пожайлуста убедитесь, что выбранный вами элемент является select или radio');
                return false;
            }
        });
    }
})(jQuery);

启动插件:

$(document).ready(function() {
    $(':radio').sexyElement();
});

PS:对不起,有些标题是俄语。标签JS代码还没有写

我真的不知道为什么,但是这个bug是通过把输入单选按钮到他的标签来解决的。

:

<fieldset class="userAge">
        <div class="fieldName">
            Возраст:
        </div>
        <div class="overflow">
            <input type="radio" name="userAge" id="seventeen" title="Выберите если вы младше 17" required>
            <label for="seventeen">17 и младше</label>
            <input type="radio" name="userAge" id="eighteen" title="Выберите если вы старше 18" required>
            <label for="eighteen">18 и старше</label>
        </div>
</fieldset>

:

<fieldset class="userAge">
    <div class="fieldName">
        Возраст:
    </div>
    <div class="overflow">
        <label for="seventeen">
            <input type="radio" name="userAge" id="seventeen" title="Выберите если вы младше 17" required>
            17 и младше
        </label>
        <label for="eighteen">
            <input type="radio" name="userAge" id="eighteen" title="Выберите если вы старше 18" required>
            18 и старше
        </label>
    </div>
</fieldset>

不管怎样,知道为什么吗?