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

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

html css

我可以使用指定的标签选择隐藏的HTML单选按钮吗？,html,css,Html,Css,所以，我想逃脱这里的谋杀，或者至少我觉得我是。我正在制作一个HTML日历，允许用户选择一天并将表单提交到服务器端进行更多处理，而无需使用javascript。以下是我的HTML的一个片段： <body> <form action="/Controller/Select" method="post"> <table> <tr> <td>

所以，我想逃脱这里的谋杀，或者至少我觉得我是。我正在制作一个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>

为了更好地衡量，这里有一个屏幕截图，显示了我正在使用和隐藏单选按钮进行的操作：

其想法是，当用户单击标签（未隐藏）时，通过“for”属性附加到的单选按钮将被选中。但是，在ChromeDeveloper工具中观察行为时，单选按钮输入元素的“checked”属性没有变化

如果我将CSS更改为：

.day input {
    display: inline-block;
}

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

这将不起作用：（当用户单击另一个标签时，收音机框将不会更改）

然而，这应该是可行的：

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

只要将单选按钮放在标签内，它就会工作。。。（顺便说一句，在这种情况下，您不必通过

id

属性将它们连接起来。）似乎对我很有用：而且很可爱，但这不是一个标准的用户体验约定，因此可能会让人困惑。@JohnB是的。我只是在做原型，想测试一些想法。我最终会用JS显示状态（用户选择的内容）。@ŠimeVidas谢谢你的提示。这肯定会减少id的数量。事实上，这确实有效。在收到@Joseph的反馈后，我继续实施了这个想法。工作起来很有魅力。
.day input {display: none;}

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