javascript - 使用 CSS 设置单选按钮样式 - 遇到问题

Question

你好我想隐藏单选按钮(圆形圆盘)并使用图像代替它。

我能够对一组单选按钮执行此操作，但另一行中的第二组单选按钮根本不起作用。最重要的是，当在第二行中选择一个单选按钮时，将选择第一行中的单选按钮。

请查看以下链接。

http://thectiweb.com/booknow/

<table class="option-image">
                <tbody>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1163" value="1163" name="option[152]">
                        <label for="option-value-1163"><img alt="Antique White Embossed" src="img/carpet.png"></label></td>
                        <td><label for="option-value-1163">Carpet Cleaning </label></td>
                    </tr>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1162" value="1162" name="option[152]">
                        <label for="option-value-1162"><img alt="Natural" src="img/maintenance.png"></label></td>
                        <td><label for="option-value-1162">Home Maintenance</label></td>
                    </tr>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1161" value="1161" name="option[152]">
                        <label for="option-value-1161"><img alt="Cherry Embossed" src="img/painting.png"></label></td>
                        <td><label for="option-value-1161">Painting </label></td>
                    </tr>
                    <tr>
                        <td class="product-info" style="width: 1px;">
                        <input type="radio" id="option-value-1160" value="1160" name="option[152]">
                        <label for="option-value-1160"><img alt="Cool White" src="img/safety.png"></label></td>
                        <td><label for="option-value-1160">Safety Issues</label></td>
                    </tr>

                </tbody>
            </table>

Answer 1

第一个问题是您在输入上复制了 id 属性值。

<table class="option-image">
    <tbody>
        <tr>
        <td class="product-info" style="width: 1px;">
        <input type="radio" id="option-value-1163" value="1163" name="option[152]">

<table class="option-image1">
    <tbody>
        <tr>
            <td class="product-info" style="width: 1px;">
            <input type="radio" id="option-value-1163" value="1163" name="option[152]">

一般来说，没有两个元素应该有相同的 id 并且每个输入都需要有一个唯一的 id 因为这就是 for 属性的方式标签上的区别。因此，给每个输入一个唯一的 id 并使用正确的 id 作为相应标签中 for 属性的值。

其次，单选按钮输入按它们的 name 属性分组。具有相同名称的输入将在同一组中，并且只能选择一个组中的一个单选按钮输入。您需要根据该链接上的 HTML 按名称将它们分成三组。例如第一组可能是这样的:

    <input type="radio" id="typeOfService-1163" value="1163" name="typeOfService">

该输入对应的标签是

    <label for="typeOfService-1163">One Bedroom Apt </label>

当然，您需要想出适合您应用的命名系统。这些只是假设的例子。