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

单选按钮正常工作（ 证明 ），但是您更新图像的逻辑不正确。 单击两个单选按钮时， 两个图像都必须更改，因为两个值都会更改（并且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

change事件仅针对用户更改的单选按钮触发，而不会触发在该过程中可能自动取消选中的任何其他单选按钮。

当任何单选按钮的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 3

这应该工作：

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

尝试更换：

this.checked

有了这个：

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