Question

我想用图像替换单选按钮，我找到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代码吗？

Answer 1

首先，您已更改第二组中无线电的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');

用图像替换无线电

1 个答案: