javascript - 用图像替换 radio

我想用图像替换单选按钮，找到了this代码，但它仅适用于一个单选组。有人有其他代码吗？我要执行的操作：Fiddle。

//Group 1
<input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
<input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
//Group 2
<input type="radio" name="second" id="sd" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
<input type="radio" name="second" id="sc" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>

谁能给我一个Javascript代码？

最佳答案

首先，您已经更改了第二组中收音机的id属性，但是标签的for属性设置为第一组中一个元素的ID。由于您隐藏了带有CSS的收音机，因此看不到此内容，但是单击第二组中的标签会将第一组中的收音机标记为选中状态。请记住要仔细地复制和粘贴代码，因为您会寻找由复制和粘贴引起的错误，而无需长时间更新所有内容。

第二件事-siblings()方法返回元素的所有同级，因此在您当前的HTML代码中，您可以看到所有单选都是同级。我建议您用例如div来包装每个组，以便将它们分隔开，并且JS代码将相同。

从问题更新了HTML：

<div>
    <input type="radio" name="site" id="so" value="stackoverflow" /><label for="so"><img src="http://sstatic.net/stackoverflow/img/favicon.ico" alt="Stack Overflow" /></label>
    <input type="radio" name="site" id="sf" value="serverfault" /><label for="sf"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
    <input type="radio" name="site" id="su" value="superuser" /><label for="su"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>

<div>
    <input type="radio" name="second" id="sd" value="superuser" /><label for="sd"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
    <input type="radio" name="second" id="sc" value="superuser" /><label for="sc"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
</div>

更新的小提琴是here。如果要确定是否确实选择了无线电，请注释掉应用CSS的行以隐藏无线电以查看其行为：

//$('#sites input:radio').addClass('input_hidden');

关于javascript - 用图像替换 radio ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14797756/