单击单选按钮时，元素内容更改为图像

Posted 2023-03-27

【中文标题】单击单选按钮时，元素内容更改为图像

【英文标题】：When radio button is clicked, element content changes to image

【发布时间】：2013-05-17 08:56:00

【问题描述】：

我可以让它为文本工作，但无法启用它，因此它读取 html 以获取图像 - http://jsfiddle.net/BgQPF/

<p> Current Radiobutton Value = <span data-bind='text: selected' ></span></p>

<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='<img src="https://github.com/gentoo90/minimal-django-file-upload-example/diff_blob/9ab39c7fe5abaf00f2d586e88e79a5a85075179e/src/for_django_1-3/myproject/media/documents/2012/07/12/example02.jpg?raw=true">' /> Yes
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='N' /> No
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='M' /> Maybe

【问题讨论】：

您希望快照包含图像吗？

你把img标签放在span标签里面，但是你需要替换span标签

因此，当您单击“是”时，会出现图像而不是 value="" 中的文本。

Chrome 在您的 Fiddle 的控制台中显示：Uncaught ReferenceError: ko is not defined。

【参考方案1】：

这是交易

<span data-bind='html: selected' ></span>

而不是

<span data-bind='text: selected' ></span>

LIVE DEMO

【讨论】：

OP 想要使用图像，在更改单选按钮“是”时查看我们的 jsfiddle 之间的区别。 OP 起初设置了一个错误的 jsfiddle。

这很好，我赞成。但是，我想借此机会指出，将< 和> 放在属性值中绝不是一个好主意。始终使用实体引用 < 和 >（或者当然，数字引用 < 和 >）。

【参考方案2】：

你想把它输出到哪里？

在您给出的示例中，我在按下第一个单选按钮时得到了正确的值，但为什么不只将 href 存储在值上并更改 img 元素的 src 属性，而不是单选按钮？

HTML部分：

<p> Current Radiobutton Value = <span data-bind='text: selected' ></span></p>

<img id="test_img" src=''    />

<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='http://www.gravatar.com/avatar/a118c92a699e7d003b8767a108d50f53?s=32&amp;d=identicon&amp;r=PG' /> Yes
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='N' /> No
<input type='radio' name='onlyOne' data-bind='checked: selected, enable: enable' value='M' /> Maybe

<BR/>

<input type='checkbox' data-bind='checked: enable'> Enable controls

脚本部分：

var viewModel = 
    enable: ko.observable(true),
    selected: ko.observable('Y')
;


$('input[name="onlyOne"]').click(function (event) 
   $('#test_img').attr('src',$(this).val());
);

ko.applyBindings(viewModel);

使用链接示例，粗略编辑。

问候，