jQuery自定义单选按钮不能用作单选按钮 [英] jQuery Custom Radio Buttons not working as radio buttons

问题描述

我正在使用自定义单选按钮的JQuery和自定义图像。现在，它将作为一个复选框。我需要它作为收音机工作。

I am using JQuery and custom images for custom radio buttons. Right now, it would work as a checkbox. I need it to work as a radio.

当我点击两个收音机中的任何一个时，两个都会被勾选而不是一次一个。我错过了什么吗？

When I click on either of both radio's both will get ticked instead of one at a time. Am I missing something?

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：

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

});

推荐答案

单选按钮工作正常（证明），但您更新图像的逻辑不正确。单击任一单选按钮时，两个图像都必须更改，因为两个值都会更改（并且更改处理程序仅在您单击的那个上触发）。让两个单选按钮使用一个更改处理程序，并在每次更改时设置两个图像，例如：

The radio buttons are working correctly (proof), but your logic for updating the images is incorrect. Both images have to change when either radio button is clicked, since both values change (and the change handler is only fired on the one that you clicked). Have a single change handler used by both radio buttons, and set both images on every change, e.g.:

$('#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);

});

实例

附注：如果您的目标浏览器支持 ：选中伪类（IE只有这个从IE9开始，不在IE8或更早版本中）和相邻兄弟组合来自CSS3，你可以用CSS完全做到这一点：

Side note: If your target browsers support the :checked pseudo-class (IE only has this as of IE9, not in IE8 or earlier) and adjacent sibling combinator from CSS3, you can do this entirely with 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);
}

实例

或者（它只是不同的选择器）：

Or alternately (it's just the selectors that are different):

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

这篇关于jQuery自定义单选按钮不能用作单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！