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

Question

这并不漂亮，但我想你会明白我想要做的。

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

Answer 1

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

应该阅读

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

还是这是一个错字？

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

edit

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

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

在此处查看示例。

Answer 3

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

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

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

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