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执行此操作：< / p>

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

jQuery自定义单选按钮不能用作单选按钮

4 个答案: