2016-08-02 70 views
-2

因此,我有这张表,我希望单选按钮将图像更改为复选标记,他们会这样做(稍后介绍,稍后再介绍),并且我希望每当点击其中一个单选按钮时,其他单选按钮变成X标记的图片(http://i.imgur.com/RcuPIGF.png)。当单击另一个单选按钮时如何更改单选按钮的图像

这是我的代码到目前为止:http://liveweave.com/4poY04

正如您所看到的,无论您单击哪个单选按钮,第一个单选按钮总是会更改为复选标记图像。我尝试过更改单选按钮的ID,但只让第二个按钮变为复选标记图像。

+4

你能张贴相关的代码中的问题吗? – gcampbell

+1

链接到我的代码使用的复选标记:http://i.imgur.com/QAUUxYF.jpg。 – ChippeRockTheMurph

+0

*寻求调试帮助的问题(“为什么这个代码不工作?”)必须包含所需的行为,特定的问题或错误以及在问题本身中重现**的最短代码**。没有明确问题陈述的问题对其他读者无益。请参阅:如何创建[mcve]。* – BSMP

回答

2

你的代码很丑。我只更新了你的工作,现在工作。

function changeImage(id, imgName) 
 
    { 
 
    // reset images 
 
    for (var i = document.getElementsByClassName('theimage').length - 1; i >= 0; i--) { 
 
    document.getElementsByClassName('theimage')[i].src = "http://i.imgur.com/DGofFGc.png"; 
 
    } 
 
    image = document.getElementById(id); 
 
    image.src = imgName; 
 
    }
table, th, td { 
 
    border: 2px solid black; 
 
    border-collapse: collapse; 
 
} 
 
label > input{ /* HIDE RADIO */ 
 
    display:none; 
 
} 
 
label > input + img{ /* IMAGE STYLES */ 
 
    cursor:pointer; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>HTML5, CSS3 and JavaScript demo</title> 
 
</head> 
 
<body> 
 
<form> 
 
<table border="1"> 
 
    <tr> 
 
     <td><b>B1</b></td> 
 
     <td> 
 
    \t <label> 
 
     <input type="radio" name="radio1" onClick="changeImage('img1','http://i.imgur.com/QAUUxYF.jpg');"> 
 
     <img align="center" name="radio1" class="theimage" id="img1" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png"> 
 
\t </input> 
 
    \t </label> 
 
     </td> 
 
     <td> 
 
    \t <label> 
 
     <input type="radio" name="radio1" onClick="changeImage('img2','http://i.imgur.com/QAUUxYF.jpg');"> 
 
     <img align="center" name="radio2" class="theimage" id="img2" height="40px" width="40px" src="http://i.imgur.com/DGofFGc.png"> 
 
\t </input> 
 
    \t </label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</body> 
 
</html>

+1

它的工作,非常感谢! – ChippeRockTheMurph

-1

如果错误的复选框发生变化,那是因为您的代码中存在一个错误。你把错误的盒子绑在错误的值上。

除已发布的API许可外,您不能更改打包控件(或Linux小工具中的“小部件”)的外观。您必须注册一个事件处理程序,取消管理该复选框,并用一些其他控件(如图像或XmDrawnButton)将其替换,该控件共享同一父级和相同的顺序位置。适当的几何管理将确保它作为一个单位与其他的兄弟会一起进行管理。

2

你并不需要为这个JavaScript ...只是使用连接到IDS ID和适当的HTML结构的标签。

此外,这有一个有效的HTML的好处。

td { 
 
    border: 1px solid grey; 
 
} 
 
input[type="radio"] { 
 
    color: red; 
 
    display: none; 
 
} 
 
input[type="radio"] + label { 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    display: inline-block; 
 
    background-image: url(http://www.undergroundwineletter.com/wp-content/uploads/2014/08/question-mark-red.png); 
 
    background-size: contain; 
 
    background-repeat:no-repeat; 
 
    background-position:center; 
 
} 
 
input[type="radio"]:checked + label { 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    display: inline-block; 
 
    background-image: url(http://i.imgur.com/QAUUxYF.jpg); 
 
    background-size: cover; 
 
}
<form action=""> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     B1</td> 
 
     <td> 
 
     <input type="radio" name="gender" id="gender2" value="female"> 
 
     <label for="gender2"></label> 
 
     </td> 
 
     <td> 
 
     <input type="radio" name="gender" id="gender3" value="other"> 
 
     <label for="gender3"></label> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

+1

非常好。现在,如果我只能找到一种方法,让它与我的这些问号,然后当你点击一个广播选项,它变成基本上你做的... – ChippeRockTheMurph

+0

完成.....这只是一个找到正确的问题图片。 –

+1

编辑过的版本也不错,但我的意思是最初有这些问号,比单击它时,它会变成旧版本的Check和X标记......但是您已经做得够多了,我想......嗯。 ..我想我可能需要添加一些JS来获得我想要的东西......我认为我必须使它像这样:如果radio1 =单击而不是将radio2和radio3的图像更改为X标记图像,否则radio2 =点击比radio1和radio3更改为X标记图像,否则如果radio3 =点击比将radio1和radio3更改为X标记图像等等。 – ChippeRockTheMurph

相关问题