Question

我是一个超级菜鸟，所以请耐心等待。

我需要能够点击图片，然后才能更改为不同的图像并选中一个框。我已经制定了代码，我可以点击图像并选中一个框，但图像不会改变。我还有用于单击复选框的代码，然后更改图像。如何将代码位放在一起以获得最终结果？

以下是点击图片并选中框而不更改图片的代码：

<label for="img1"><img class="img" src="http://www.gettrumpetlessons.com/wp-    content/uploads/2014/01/trumpet_valve_open.png" />
</label>
<input type="checkbox" class="chk " checked="checked" id="img1" name="img1" value="0" />

这是检查框和更改图像的代码：

<script type="text/javascript">
function changePic(){
if (document.form1.check.checked){
document.picture.src="http://www.gettrumpetlessons.com/wp-content/uploads/2014/01/trumpet_valve_closed.png";
}else{
document.picture.src="http://www.gettrumpetlessons.com/wp-content/uploads/2014/01/trumpet_valve_open.png";
}
}</script>
<img src="http://www.gettrumpetlessons.com/wp-content/uploads/2014/01/trumpet_valve_open.png" id="picture" name="picture"> 
<form name="form1" method="post" action="">
  <input type="checkbox" name="check" value="checkbox" onClick="changePic();">
</form>

非常感谢任何帮助。我假设将“标签”代码添加到第二个代码中更好，但我不知道如何。任何建议。

由于

Ĵ

Answer 1

您可以创建一个切换图像src的函数，并使用图像的数据属性进行切换。点击两个元素即可调用此函数。

在此功能中，如果单击了图像，也会勾选该复选框。但如果单击该复选框，则不要切换，因为这是复选框的默认行为。

见下文：

http://jsfiddle.net/m3PFK/

(function () {
var image = document.getElementById('image');
var radio = document.getElementById('check');

function toggle() {
    var otherSrc = image.getAttribute('data-other-src');
    var src = image.getAttribute('src');
    image.setAttribute('data-other-src', src);
    image.setAttribute('src', otherSrc);

    if (this === image) {
        radio.checked = !radio.checked;
    }
}

image.onclick = toggle;
radio.onclick = toggle;

})();

HTML：

<img id="image"  src="http://us.123rf.com/400wm/400/400/dixi_/dixi_0901/dixi_090100077/4215731-small-kitten-on-white-background.jpg" data-other-src="http://www.freewallpapershq.com/wallpapers/Small_Kitten_Hope_14673.jpg">
<input type="checkbox" id="check">

我想点击图像并选中一个框并更改图像

1 个答案: