Question

所以，我试图逃避这里的谋杀，或者至少我觉得我是。我正在制作一个HTML日历，允许用户选择一天并将表单提交到服务器端以进行更多处理，而无需使用javascript 。这是我的HTML片段：

<body>
    <form action="/Controller/Select" method="post">
        <table>
            <tr>
                <td>
                    <div class="day">
                        <div>30</div>
                        <div>
                            <input type="radio" name="selectedDay" id="selectedDay_2011_10_30" value="2011-10-30" />
                            <label for="selectedDay_2011_10_30">$1.00</label>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="day">
                        <div>31</div>
                        <div>
                            <input type="radio" name="selectedDay" id="selectedDay_2011_10_31" value="2011-10-31" />
                            <label for="selectedDay_2011_10_31">$1.00</label>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="day">
                        <div>1</div>
                        <div>
                            <input type="radio" name="selectedDay" id="selectedDay_2011_11_01" value="2011-11-01" />
                            <label for="selectedDay_2011_10_01">$1.00</label>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>

这是我的CSS：

.day input {
    display: none;
}

为了更好地衡量，这里是我正在做的事情和没有隐藏的单选按钮的屏幕截图：

With radio buttons displayed. (i.e. - display: inline-block;)

Without the radio buttons displayed. (i.e. - display: none;)

这个想法是，当用户点击标签（未隐藏）时，通过“for”属性附加的单选按钮将被检查。但是，观看Chrome开发者工具中的行为会显示单选按钮输入元素的“已选中”属性没有变化。

如果我将CSS更改为：

.day input {
    display: inline-block;
}

每次单击与其关联的标签时，都会选中单选按钮。有任何想法吗？我做错了吗？

Answer 1

这不起作用:(当用户点击另一个标签时，不会更改单选框）

.day input {display: none;}

但这应该有效：

.day input {visibility: hidden; width: 0px; height: 0px;}

我可以使用指定的标签选择隐藏的HTML单选按钮吗？

1 个答案: