Is there an HTML5 way of making at least one of several checkboxes mandatory?

Question

Suppose I wanted you to select at least one option, but radio buttons aren't appropriate because choosing more than one option is also allowed.

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

What I thought would happen in this setup, was that putting the required attribute (on all of the checkboxes) would then make the browser force you to select at least one of those checkboxes, because they share the same name attribute. But instead, it forces you to tick all of them.

Seeing as my expected solution doesn't work, is there any other "hack" that can be employed to get the expected behaviour here, that doesn't involve javascript?

Possible duplicate: https://stackoverflow.com/q/6218494/1220550 (it has no Accepted Answer but everything points to needing javascipt) — Peter B, Jan 10 '18 at 10:55

AndreyS Scherbakov · Answer 1 · 2018-01-10T14:48:42.103

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

I'm not sure that you'll be quite satisfied with such a solution (and it should be elaborated a lot first to look smoothly and work with all browsers..). Thus it may be considered as a rough prototype of possible javascript-less solution.

The idea is to display radio buttons on top of checkboxes and control the radio buttons visibility and event sensitivity in a way which enables both switching between the options (on first click) and toggling checkboxes (on repeated clicks to the same option box). On the server side, food2 selection should be combined to food[] flags (by inserting the respective single value to the array).

Is there an HTML5 way of making at least one of several checkboxes mandatory?

1 Answers1