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

});

Live example

---

附注：如果您的目标浏览器支持:checked pseudo-class（IE 仅在 IE9 中具有此功能，而在 IE8 或更早版本中没有）和来自 CSS3 的 adjacent sibling combinator，您可以完全使用 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);
}

Live example

或者交替（只是选择器不同）：

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 事件仅针对用户更改的单选按钮触发，不会针对在该过程中可能自动取消选中的任何其他单选按钮触发。

当任何单选按钮的更改事件触发时，您应该更新所有图像：

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>s 时，事件处理程序将触发。在处理程序内部，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')