Question

通常但我需要为每个按钮设置不同的自定义单选按钮图像。

因此Radio1会有与Radio2不同的图像。

尝试使用下面的代码，但它不起作用所以我一定做错了什么？

以下是代码：

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

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

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

var radio1checkedImage = "radio1_checked.png",
    radio1uncheckedImage = "radio1_unchecked.png",
    radio2checkedImage = "radio2_checked.png",
    radio2uncheckedImage = "radio2_unchecked.png";

   $('img').attr("src", radio1uncheckedImage);

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

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

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

});


});

</script>

更新：Here与上面的代码相同，但没有多个图片。你可以看到它的工作原理。不能修改代码以使每个无线电有多个图像吗？

Answer 1

您可以使用CSS来定义哪些图像与哪个单选按钮相关联。在my answer to you previous question的JSBin示例的基础上，您可以使用JavaScript将类名（例如'checked'）添加到已检查无线电的父（即<label> ）：

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

radios.change(function() {
    radios.filter(':checked').parent().addClass('checked');
    radios.filter(':not(:checked)').parent().removeClass('checked');
});

所以，既然<label>将拥有'checked'类，如果选择了该广播，你可以使用CSS来设置它的样式：

label {
    /* regular styles */
}
label[for="radio1"].checked {
    /* checked styles for #radio1's label */
}
label[for="radio2"].checked {
    /* checked styles for #radio2's label */
}

使用CSS代替<img>代码确实意味着您需要使用background-image，因此请注意这一点。

实例：http://jsbin.com/ebapov/edit#javascript,html,live

以防万一，这里是上面发布的JavaScript的更详细版本：

// Fetch the radio buttons (this is a jQuery collection):
var radios = $('input:radio');

radios.change(function() {

    // Filter the radio inputs into 'checked' and 'unchecked':
    var checkedInputs = radios.filter(':checked');
    var uncheckedInputs = radios.filter(':not(:checked)');

    // Get the 'checked' and 'unchecked' labels:
    var checkedLabels = checkedInputs.parent();
    var uncheckedLabels = uncheckedInputs.parent();

    // Add the class "checked" to the checked labels:
    checkedLabels.addClass('checked');

    // ... and remove it from the unchecked labels:
    uncheckedLabels.removeClass('checked');
});

这些代码大部分都依赖于jQuery函数可以链接这一事实。这意味着当您在jQuery集合上调用parent()函数时，它实际上将返回一个集合，其中包含原始集合中元素的每个的父元素。如果您随后在该新集合上调用addClass，则会向这些父母的每个添加一个类名。

大多数jQuery的功能都可以链接。

Answer 2

此外，我使用CSS的other answer让我提供了另一种解决方案。

首先;你想跟踪哪个图像与哪个单选按钮。为什么不使用对象文字？

var checkedImages = {
    'radio1': "radio1_checked.png",
    'radio2': "radio2_checked.png"
};
var uncheckedImage = "unchecked.png";

通过这种方式，您可以轻松引用不同的网址，例如：checkedImages['radio2']。

更改事件处理程序看起来非常相似。唯一的区别是您对checkedLabels和uncheckedLabels：

的处理方式

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

radios.change(function() {
    var checkedLabels = radios.filter(':checked').parent();
    var uncheckedLabels = radios.filter(':not(:checked)').parent();

    uncheckedLabels.children('img').attr('src', uncheckedImage);

    checkedLabels.each(function() {
        var image = $(this).children('img');
        var name = $(this).attr('for');

        if (checkedImages[name] !== undefined) {
            // We have checked image for this radio button, so set it:
            image.attr('src', checkedImages[name]);
        } else {
            // We don't have checked image for this radio button.
            image.attr('src', uncheckedImage);
        }
    });
});

主要区别：

我们使用children()查找图片。
我们使用each()为每个未经检查的标签添加更复杂的逻辑。
我们会检查所选的<label> for属性（使用.attr('for')）以找出我们应该应用的图片。

在此示例中，只有checked状态对于不同的无线电具有不同的图像。如果您还需要不同的unchecked图像，则可以轻松应用相同的原则。

实例：http://jsbin.com/acalir/edit#javascript,html,live

P.S。不要忘记将src设置为未经检查的图像（以HTML格式），或执行以下操作（在JS中）：

$('input:radio').change();

以编程方式触发change事件，这将导致应用未经检查的图像。

JQuery自定义单选按钮代码（代码不工作）

2 个答案: