如何使用 jQuery 和单选按钮切换两个图像？答案

【问题标题】：How do I toggle two images using jQuery and radio buttons?如何使用 jQuery 和单选按钮切换两个图像？
【发布时间】：2010-06-08 04:25:40
【问题描述】：

这并不漂亮，但我想你会得到我想要做的。

<label><input name="jpgSel" type="radio" value="0">jpg 1</label><br />
<label><input name="jpgSel" type="radio" value="1">jpg 2</label><br />
<div id="showjpg"></div>

和

$(document).ready(function() {
    $("select").change(function () {
           if ($("jpgSel:checked").val() == 1) {
            $('#showjpg').attr({
                src: 'one.jpg',
                 alt: 'one dot jpg'
        });
    }
    else {
            $('#showjpg').attr({
                 src: 'two.jpg',
                 alt: 'two dot jpg'
        });
    }
});

【问题讨论】：

标签： jquery forms radio-button

【解决方案1】：

if ($("jpgSel:checked").val() == 1) {

应该阅读

if ($("#jpgSel:checked").val() == 1) {

还是打错字了？

此外，您可能还想单独使用 $('#jpgSel:checked') 而不使用 == 1

编辑

哦，$("input[@name='jpgSel']").click(function(){ 可能会更好。

【讨论】：

您不再需要@，也不需要单引号。所以$("input[name=jpgSel]")... 应该这样做。

【解决方案2】：

你有几个问题：

#showjpg 元素是 div，你应该有一个 img 元素。
您用于绑定change 事件的选择器不正确（$("select")），应该类似于$("input[name=jpgSel]")
如果将更改事件绑定到两个单选按钮，则只需通过this.value 即可获取所选元素的值。

试试这个：

$(document).ready(function() {
  $("input[name=jpgSel]").change(function () {
    if (this.value == "0") {
      $('#showjpg').attr({
        src: 'one.jpg',
        alt: 'one dot jpg'
      });
    } else {
      $('#showjpg').attr({
        src: 'two.jpg',
        alt: 'two dot jpg'
      });
    }
  });
});

查看示例here。

【讨论】：

谢谢！正是我想要的。并彻底解释。说真的，谢谢。

【解决方案3】：

jpgSel是一个名字，必须这样选择

$("[name='jpgSel']:checked")

虽然我认为废弃它并像这样使用 .click() 函数会更容易

$("[name='jpgSel'][value='0']").click(function{/*do something*/});
$("[name='jpgSel'][value='1']").click(function{/*do something else*/});

【讨论】：