0

我想用图像替换单选按钮，我找到了这段代码，但它只适用于一个单选组。有没有人有另一个代码。我想做的事：小提琴。

//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代码？

4

1 回答 1

2

第一件事是您已经更改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>

更新的小提琴在这里。如果您想确定收音机是否被正确选中，请注释掉应用 CSS 来隐藏收音机的行以查看其行为：

//$('#sites input:radio').addClass('input_hidden');
于 2013-02-10T12:59:23.773 回答