Question

你好我试图隐藏单选按钮（圆形圆盘）并使用图像代替它。

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

请查看以下链接。

<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>

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

Answer 2

HTML

<input type="radio" name="radiog_lite" id="radio1" class="css-checkbox" /><label for="radio1" class="css-label"></label><input type="radio" name="radiog_lite" id="radio2" class="css-checkbox" checked="checked"/><label for="radio2" class="css-label"></label><input type="radio" name="radiog_lite" id="radio3" class="css-checkbox" /><label for="radio3" class="css-label"></label>

CSS

label {margin-right:20px;}
input[type=radio].css-checkbox {
    display:none;
}

input[type=radio].css-checkbox + label.css-label {
    padding-left:240px;
    height:240px; 
    display:inline-block;
    background-repeat:no-repeat;
    background-position: -150 -50;
    vertical-align:middle;
    cursor:pointer;
}

input[type=radio].css-checkbox:checked + label.css-label {
    background-position: -410 -309px;
}

label.css-label {
    background-image:url(http://erretres.com/drivenbydesign/wp-content/uploads/2013/06/icons2.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

使用CSS设置单选按钮 - 出了问题

2 个答案:

HTML

CSS