Question

我做了一些测试 - http://magora-systems-test.esy.es/，其中一个任务是通过JavaScript（jQuery）使Radio Buttons stilization。我一次又一次地重构构造但总是有一个问题：JS成功地将输入单选按钮属性设置为checked =＆＃34; checked＆＃34;通过单击程式化克隆，但它没有设置为确实选择，并且所需的属性talkink相同。我不明白为什么？

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代码尚未编写。

Answer 1

我真的不知道为什么但是通过将输入单选按钮放到他的标签上来解决这个错误。

<强>之前：

<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>

无论如何都有任何想法？

单选按钮未设置为已选中

1 个答案: