Question

假设我希望您选择至少一个选项，但单选按钮不合适，因为也允许选择多个选项。

<form action="" method="post">
    <h1>What fruit do you enjoy eating?</h1>

    <input type="checkbox" name="food[]" value="1" required/> Apples
    <input type="checkbox" name="food[]" value="2" required/> Oranges
    <input type="checkbox" name="food[]" value="3" required/> Watermelons
    <input type="checkbox" name="food[]" value="4" required/> Tomatoes (yes they are)

    <button type="submit">
        Submit
    </button>
</form>

我认为在此设置中会发生的是，将required属性（在所有复选框上）放置会使浏览器强制您选择至少其中一个复选框，因为它们共享相同的内容name属性。但相反，它迫使你勾选所有这些。

看到我的预期解决方案不起作用，是否还有其他“黑客”可以用来获取预期的行为，这不涉及javascript？

Answer 1

＆＃13;

<html><body>
<h2> Choose your food</h2>
<table class="stacked" id="food_choice">
<tr><td>
<input type="checkbox" name="food[]" value="1"/>
<input type="radio" name="food2" value="1" required checked/> </td><td> Apples
</td><td> 
    <input type="checkbox" name="food[]" value="2"/> 
    <input type="radio" name="food2" value="2" required/> </td><td> Oranges
</td><td> 
    <input type="checkbox" name="food[]" value="3"/>
    <input type="radio" name="food2" value="3" required/> </td><td> Watermelons
</td><td> 
    <input type="checkbox" name="food[]" value="4"/> 
    <input type="radio" name="food2" value="4" required/> </td><td> Tomatoes (yes they are)
</td></tr>
</table> 

<style>

.stacked td {
	position: relative;
}

.stacked input[type="radio"] {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
}

.stacked input:not(:checked) + input:not(:checked) {
	pointer-events: auto;
	display: block;
}
.stacked input:not(:checked) + input:checked {
	pointer-events: none;
	display: block;
}
.stacked input:checked + input {
	display: none;
}

</style>
</body></html>

＆＃13;

我不确定您是否对这样的解决方案非常满意（并且应首先详细阐述以便顺利查看并与所有浏览器一起工作......）。因此，它可以被视为可能的无JavaScript解决方案的粗略原型。

我们的想法是在复选框顶部显示单选按钮，并以一种方式控制单选按钮的可见性和事件敏感度，这样既可以在选项之间切换（在第一次单击时），也可以在切换复选框时切换（在重复单击到同一选项框时））。在服务器端，food2选择应该与food []标志组合（通过将相应的单个值插入到数组中）。

是否有HTML5方法至少要使用几个复选框中的一个？

1 个答案: