JQuery自定义单选按钮代码(代码不起作用）

JQuery Custom Radio Buttons code (code not working)

本文关键字：代码 不起作用 JQuery 单选按钮 自定义      更新时间：2023-09-26

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

因此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>

更新：这是与上面相同的代码，但没有多个图像。正如你所看到的，它是有效的。代码不能修改为每个收音机有多个图像吗？

您可以使用CSS来定义哪些图像与哪个单选按钮匹配。基于我上一个问题的回答中的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，实时

为了以防万一，下面是上面发布的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的大多数函数都可以链接。

除了我的另一个答案（使用CSS）之外，让我提供一个替代解决方案。

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

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

通过这种方式，您可以很容易地引用不同的URL，例如：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，实时

附言：不要忘记将src设置为未检查的图像（在HTML中），或者执行以下操作（在JS中）：

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

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

相关文章：