“Javascript”中的一组单选按钮 [英] Set of radio buttons in "Javascript"

问题描述

我有一组三个单选按钮与一组三个图像相连，即{image1，radioBtn1}，{image2，radioBtn2}，{image3，radioBtn3}。

我正在尝试执行以下操作：单击一个图像时，连接到此按钮的单选按钮将自动变为已检查（例如：当我点击image3时，radioBtn3将被选中）

我试过以下代码：

HTML：

 < input type =radioid =radioBtb1name =subject/>< a href =＃><< a ; img id =image1src =../ image / img3.pngheight =150px/>< / a> 
< input type =radioid =radioBtb2name =subject/>< a href =＃>< img id =image2src =../ image /img3.pngheight =150px/>< / a> 
< input type =radioid =radioBtb3name =subject/>< a href =＃>< img id =image3src =../ image /img3.pngheight =150px/>< / a> 
  

Javascript：
（$ document.getElementById（'image1'））
document.getElementById（radioBtb1）.checked = true;
if（document.getElementById（'personal'））
document.getElementById（radioBtb2）.checked = true;
if（document.getElementById（'image3'））
document.getElementById（radioBtb3）.checked = true;
}

但这根本行不通。

解决方案

您可以使用 < label> 标记。只需使用以下语法：

 < label> 
< input type =radioid =radioBtb1name =subject/> 
< img id =image1src =../ image / img3.pngheight =150px/> 
< / label> 
< label> 
< input type =radioid =radioBtb2name =subject/> 
< img id =image2src =../ image / img3.pngheight =150px/> 
< / label> 
< label> 
< input type =radioid =radioBtb3name =subject/> 
< img id =image3src =../ image / img3.pngheight =150px/> 
< / label> 
  

这会自动完成您要查找的内容。

I have a set of three radio buttons connected with a set of three images - i.e. {image1, radioBtn1}, {image2, radioBtn2}, {image3, radioBtn3}.

I'm trying to do the following: When I click on one image, the radio button connected to this button turn to 'checked' automatically (for example: when I click on image3, radioBtn3 will be checked)

I've tried the following code:

HTML:

<input type="radio" id="radioBtb1" name="subject"/><a href="#"><img id="image1" src="../image/img3.png" height="150px"/></a>
<input type="radio" id="radioBtb2" name="subject"/><a href="#"><img id="image2" src="../image/img3.png" height="150px"/></a>
<input type="radio" id="radioBtb3" name="subject"/><a href="#"><img id="image3" src="../image/img3.png" height="150px"/></a>

Javascript:

function selectSubject(){
    if(document.getElementById('image1'))
        document.getElementById(radioBtb1).checked=true;
    if(document.getElementById('personal'))
        document.getElementById(radioBtb2).checked=true;
    if(document.getElementById('image3'))
        document.getElementById(radioBtb3).checked=true;
}

But that didn't work at all.

解决方案

You can do this really easily using the <label> tag. Just use the following syntax:

<label>
    <input type="radio" id="radioBtb1" name="subject"/>
    <img id="image1" src="../image/img3.png" height="150px"/>
</label>
<label>
    <input type="radio" id="radioBtb2" name="subject"/>
    <img id="image2" src="../image/img3.png" height="150px"/>
</label>
<label>
    <input type="radio" id="radioBtb3" name="subject"/>
    <img id="image3" src="../image/img3.png" height="150px"/>
</label>

That will automatically do exactly what you are looking for.

这篇关于“Javascript”中的一组单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！