Question

我想将图像添加到单选按钮，以便在选择一个按钮时，所有其他按钮应处于非选定模式（如单选按钮组的行为）。

但我想用图像来实现它。这样做的方法是什么？

Answer 1

如果您不介意单选按钮可见（这可能是一个好主意，以便用户更容易理解发生的事情），这应该是：

<fieldset>
    <legend>Images</legend>

    <label for="image_1">
        <input id="image_1" name="image" type="radio">

        <img>
    </label>

    <label for="image_2">
        <input id="image_2" name="image" type="radio">

        <img>
    </label>
</fieldset>

否则，如果你真的只是希望你的图像像单选按钮一样，那么你需要编写一些JavaScript来使图像模仿单选按钮的所有行为（即为onclick事件分配函数图像和其他事件，以便他们使用键盘为不使用鼠标的用户。）

您仍然可以包含单选按钮，但可以通过CSS隐藏它们，并编写JavaScript，以便在用户与图像交互时更改隐藏单选按钮的状态。

Answer 2

检查：

<input type="radio" name="group1" value="1" />
<input type="radio" name="group1" value="2" />

和其他一组单选按钮：

<input type="radio" name="group2" value="3" />
<input type="radio" name="group2" value="4" />
<input type="radio" name="group2" value="5" />

Answer 3

如果你想支持旧浏览器（IE），我认为你必须用js来做。考虑一下这个html：

<img class="radio" src="radio1.jpg" id="radio1"/>
<img class="radio" src="radio2.jpg" id="radio2"/>
<img class="radio" src="radio3.jpg" id="radio3"/>
<img class="radio" src="radio4.jpg" id="radio4"/>
<img class="radio" src="radio5.jpg" id="radio5"/>

和jquery：

$(".radio").click(function(){
    $("this").addClass("selected").siblings().removeClass("selected")
})

读取所选值只需获取img.selected的ID。

如何获得带图像的单选按钮行为？

3 个答案: