Пользовательские радиокнопки jQuery не работают в качестве радиокнопок

Question

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

Когда я нажимаю на оба радио, оба будут отмечены галочкой вместо одного за раз. Я что-то упустил?

HTML:

<label for="radio1">
    <img src="radio_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio1" style="display:none;">
</label>

<label for="radio2">
    <img src="radio_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio2" style="display:none;">
</label>

JavaScript:

$(document).ready(function() {

    $("#radio1").change(function() {
        if (this.checked) {
            $(this).prev().attr("src", "radio_checked.png");
        } else {
            $(this).prev().attr("src", "radio_unchecked.png");
        }
    });


    $("#radio2").change(function() {
        if (this.checked) {
            $(this).prev().attr("src", "radio_checked.png");
        } else {
            $(this).prev().attr("src", "radio_unchecked.png");
        }
    });

});

Answer 1

Переключатели работают правильно ( proof ), но ваша логика обновления изображений неверна. Оба изображения должны измениться при нажатии любой из переключателей, поскольку оба значения изменяются (и обработчик change запускается только на том, который вы щелкнули). Имейте один обработчик change, используемый обеими радиокнопками, и устанавливайте оба изображения при каждом изменении, например ::

$('#radio1, #radio2').change(function() {
  var r;

  r = $("#radio1");
  r.prev().attr("src", r[0].checked ? checkedImage : uncheckedImage);
  r = $("#radio2");
  r.prev().attr("src", r[0].checked ? checkedImage : uncheckedImage);

});

Живой пример

---

Примечание: если ваши целевые браузеры поддерживают псевдокласс :checked (IE имеет это только в IE9, а не в IE8 или более ранних версиях) и соседний комбинатор братьев и сестер из CSS3, вы можете сделать это полностью с помощью CSS:

HTML:

<input type="radio" name="radiogroup" id="radio1" style="display: none">
<label for="radio1"></label>
<input type="radio" name="radiogroup" id="radio2" style="display: none">
<label for="radio2"></label>

CSS:

#radio1 + label, #radio2 + label {
    display: inline-block;
    background-image: url(radio_unchecked.png);
    width: 32px;  /* Whatever matches the images */
    height: 32px; /* Whatever matches the images */
}
#radio1:checked + label, #radio2:checked + label {
    background-image: url(radio_checked.png);
}

Живой пример

Или поочередно (различаются только селекторы):

input[name="radiogroup"] + label {
    display: inline-block;
    background-image: url(radio_unchecked.png);
    width: 32px;  /* Whatever matches the images */
    height: 32px; /* Whatever matches the images */
}
input[name="radiogroup"]:checked + label {
    background-image: url(radio_checked.png);
}

Answer 2

Это должно работать:

<label for="radio1">
    <img src="radio_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio1" style="display:none;">
</label>

<label for="radio2">
    <img src="radio_unchecked.png" style="vertical-align:middle" />
    <input name="radiogroup" type="radio" id="radio2" style="display:none;">
</label>

<script>
 $(document).ready(function(){

     $("input[name=radiogroup]").change(function() {
        $("input[name=radiogroup]").prev().attr("src", "radio_unchecked.png");
        $(this).prev().attr("src", "radio_checked.png");
     });
 });

</script>

Answer 3

Событие change происходит только для переключателя, который был изменен пользователем, а не для любых других переключателей, которые могут автоматически отключаться в этом процессе.

Вы должны обновить все изображения, когда срабатывает событие изменения для любого переключателя:

var radios = $('input:radio');

radios.change(function() {
    radios.filter(':checked').prev().attr("src", "radio_checked.png");
    radios.filter(':not(:checked)').prev().attr("src", "radio_unchecked.png");
});

Это будет работать для любого числа переключателей. Ссылка на оригинальную коллекцию радиовходов хранится в radios (это более эффективно). При щелчке по любому из <label> обработчик события срабатывает. Внутри обработчика filter() используется для разделения коллекции radios на проверенные и непроверенные радиовходы.

Рабочая демоверсия: http://jsbin.com/ibaqid/2/edit#javascript,live

Answer 4

Попробуйте заменить:

this.checked

на это:

$(this).is(':checked')