Использование jQuery для выбора скрытых радиокнопок, но не работает onclick - PullRequest
Новая
       15

Использование jQuery для выбора скрытых радиокнопок, но не работает onclick

0 голосов
/ 05 января 2012

Я использую jQuery, чтобы скрыть фактические переключатели на моем веб-сайте и заменить их изображениями (настраиваемые переключатели). JQuery позволяет пользователю щелкнуть изображение, которое в свою очередь «выбирает» скрытый переключатель. Фактические переключатели имеют события onclick, прикрепленные к ним в html-коде, но когда я «выбираю» переключатель с помощью изображения (jQuery), фактический переключатель не появляется, чтобы определить выбор, и, следовательно, событие onclick НЕ активируется.

Я могу подтвердить, что скрипт события onclick работает при использовании переключателей по умолчанию (без jQuery); это просто не работает, когда я использую jQuery для пользовательских переключателей. Вот мой код:

HTML-код 

<div class="prettyRadiobuttons clearfix">
<ul id="store">

<li><input name="store" type="radio" id="store_1" value="store_1" onclick="dynamic_Select('code.php', this.value)" />
<label for="store_1">Store 1</label></li>

<li><input name="store" type="radio" id="store_2" value="store_2" onclick="dynamic_Select('code.php', this.value)" />
<label for="store_2">Store 2</label></li>

</ul>
</div>

jQuery (для пользовательских переключателей) 

$(document).ready(function() {
        //Adds the "radiolist" class to the div containing the radio buttons
        $("div.prettyRadiobuttons").addClass("radiolist");

        //Adds the html for the custom radio button (image) to each radio button (li)
        $("div.radiolist li").append('<a class="radio-select" href="#">Select</a><a class="radio-deselect" href="#">Cancel</a>');

        //Handles selecting a radio button
        $(".radiolist .radio-select").click(
            function(event) {
                event.preventDefault();
                var $boxes = $(this).parent().parent().children();
                $boxes.removeClass("selected");
                $(this).parent().addClass("selected");
                $(this).parent().find(":radio").attr("checked","checked");
            }
        );

        //Handles de-selecting a radio button
        $(".radiolist .radio-deselect").click(
            function(event) {
                event.preventDefault();
                $(this).parent().removeClass("selected");
                $(this).parent().find(":radio").removeAttr("checked");
            }
        );
    });

Различные классы в jQuery используются для назначения разных изображений через CSS в зависимости от того, выбран ли переключатель.

Код jQuery работает без присутствия событий onclick, а события onclick работают без использования jQuery, но я не могу заставить их обоих работать вместе. Любая помощь будет высоко ценится!

Ответы [ 3 ]

3 голосов
/ 05 января 2012

Просто добавьте туда ".click ()". 

$(this).parent().find(":radio").click().attr("checked","checked");

И 

$(this).parent().find(":radio").click().removeAttr("checked");

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

1 голос
/ 10 октября 2013

Для переключения класса на родительском радиовходе. (label.radio) позволяет вам сказать, что вы хотите стилизовать этот label.radio с альтернативой некоторым стилям CSS3, которые также работают в IE9 / 10. Возможно, вы также захотите включить это для динамически вставляемого контента, тогда вам нужно привязать щелчок к документу. Вы также хотите «снять отметку» с родителей другого радио в группе радиостанций.

Сначала в уже установленном начальном состоянии: 

$('input[type="radio"]:checked').closest('.radio').addClass('checked'); 
$('input[type="radio"]:disabled').closest('.radio').addClass('disabled');

Тогда для событий клика: 

$(document).on('click','input[type="radio"]', function(){       
    var name = $(this).attr('name');        
    $('input:radio[name="'+name+'"]').closest('.radio').removeClass('checked');         
    if( $(this).prop('checked')){
        $(this).closest('.radio').addClass('checked');      
    }
});

Пример HTML: 

<div class="radio-group">               

    <label class="radio">
        <input type="radio" name="henk" value="Yes" checked="checked">
        <span>Abracadabra</span>
    </label>

    <label class="radio">
        <input type="radio" name="henk" value="Yes" disabled="disabled" >
        <span>Abracadabra.</span>
    </label>

    <label class="radio">
        <input type="radio" name="henk" value="Yes" >
        <span>Simsalabim</span>
    </label>

</div>

Я добавил полный пример на скрипку.

1 голос
/ 05 января 2012

Мне не совсем понятно, в чем ваша проблема, но у меня есть несколько предложений:

  1. Используйте click () вместо attr («проверено», «проверено») - эффект будет таким же (будет выбран радиоприемник), и будет вызван обработчик onclick; или:

  2. Просто вызовите dynamic_Select непосредственно в коде jQuery.

...