Soit l'un, soit l'autre soit aucun

Comment représenter une interface graphique ou l'utilisateur à le choix entre deux items mais il peut aussi n'en choisir aucun. Deux implémentations possibles, l'une avec des boutons radio l'autre avec des cases à cocher.

Utilisation de deux boutons radio

<p>
    <label for="c1">Choix 1</label>
    <input type="radio" name="choice" value="c1" id="c1">
</p>
<p>
    <label for="c2">Choix 2</label>
    <input type="radio" name="choice" value="c2" id="c2">
</p>
Code HTML
let checked = false;
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
const onMouseDown = (e) => {
    checked = e.target.checked;
};
const onClick = (e) => {
    if (checked) {
        e.target.checked = false;
    }
};
c1.addEventListener('mousedown', onMouseDown);
c1.addEventListener('click', onClick);
c2.addEventListener('mousedown', onMouseDown);
c2.addEventListener('click', onClick);
Code javascript

Utilisation de deux cases à cocher

<p>
    <label for="c1">Choix 1</label>
    <input type="checkbox" name="c1" value="c1" id="c1">
</p>
<p>
    <label for="c2">Choix 2</label>
    <input type="checkbox" name="c2" value="c2" id="c2">
</p>
Code HTML
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
const onClick = (e) => {
    const opp = e.target === c1 ? c2 : c1;
    if (e.target.checked) {
        opp.checked = false;
    }
};
c1.addEventListener('click', onClick);
c2.addEventListener('click', onClick);
Code javascript