logo标签列表

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

htmlcss
3

所以，我在这里试图逃避谋杀，或者至少我感觉是这样。我正在制作一个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;
}

为了更好地解释，这里有我隐藏单选按钮前后的截图：
在显示单选按钮时的截图（即 - display: inline-block;）： With radio buttons displayed. (i.e. - display: inline-block;) 在不显示单选按钮时的截图（即 - display: none;）： Without the radio buttons displayed. (i.e. - display: none;) 我的想法是，当用户点击标签（未被隐藏）时，通过“for”属性连接到的单选按钮将变为选中状态。但是，在Chrome开发工具中观察行为时，单选按钮输入元素的“checked”属性没有变化。
如果我将CSS更改为：
.day input {
    display: inline-block;
}

每次我点击与其相关联的标签时，单选按钮都会被选中。有什么想法吗？我做错了吗？
3
只需将单选按钮放置在标签内部即可，它就可以工作了...(顺便说一句，在这种情况下，您不必通过 id/for 属性将它们连接起来。) - Šime Vidas
3
似乎对我有效：http://jsfiddle.net/gBVMW/ 和 http://jsfiddle.net/gBVMW/1/ - Joseph Marikle
可爱，但这不是标准的用户体验惯例，可能会让人感到困惑。 - JohnB
@JohnB 是的，我只是在原型设计阶段，想要测试一些想法。最终我会使用JS来展示状态（用户选择了什么）。 - Mateo
@Joseph 奇怪。你有没有尝试在开发者工具中观察DOM元素属性？我无法实时更改“checked”属性/属性。也许这只是开发者工具的问题。 - Mateo
显示剩余2条评论
1个回答
0
这样不会起作用：（当用户单击另一个标签时，选项按钮不会更改）
.day input {display: none;}

这个应该可以工作：

.day input {visibility: hidden; width: 0px; height: 0px;}
实际上，这确实有效。在收到@Joseph的反馈后，我继续实施了这个想法。效果非常好。 - Mateo
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接