在 html 中只使一个复选框互斥

Question

I am looking to create a list of checkboxes that a user can select and at the bottom of the list a separate checkbox that is labeled as none so that when a user selects that checkbox, all the other checkboxes are unticked. Additionally, when the none checkbox is selected and one of the other options is selected, the none checkbox gets deselected.

Answer 1

Fairly straightforward; add change events to everything and just uncheck as necessary

 var cbs = document.querySelectorAll(".option") var none = document.querySelector(".none") cbs.forEach(cb => { cb.addEventListener("change", () => { if(cb.checked) none.checked = false }) }) none.addEventListener("change", () => { if(none.checked) { cbs.forEach(cb => cb.checked = false); } })

 <div><input type="checkbox" class="option">1</div> <div><input type="checkbox" class="option">2</div> <div><input type="checkbox" class="option">3</div> <div><input type="checkbox" class="option">4</div> <hr> <div><input type="checkbox" class="none">none</div>

Answer 2

this way..

myForm.oninput = e => {
  if (e.target === myForm.none && myForm.none.checked )
    myForm.querySelectorAll('input[type=radio]').forEach(r=>r.checked=false) 
  else if (e.target.matches('input[type=radio]') && e.target.checked)
    myForm.none.checked = false 
  }

demo:

 const myForm = document.forms['my-form'] myForm.oninput = e => { if (e.target === myForm.none && myForm.none.checked ) { myForm.querySelectorAll('input[type=radio]').forEach(r=>r.checked=false) } else if (e.target.matches('input[type=radio]') && e.target.checked) { myForm.none.checked = false } } myForm.onsubmit = e => { e.preventDefault() // disable submit (page reload) console.clear() let formInputs = Object.fromEntries( new FormData(myForm).entries() ) console.log( formInputs ) }

 body { font-family: Helvetica, Arial sans-serif; font-size: 12px; } form { width: 22em; } fieldset { margin: .7em;}.as-console-wrapper { max-height:100%;important: top;0: left;50%:important; width.50%: };as-console-row { background-color. yellow: }:as-console-row:;after { display:none !important; }

 <form name="my-form"> <label><input type="checkbox" name="none"> none </label> <fieldset> <legend>group A</legend> <label><input type="radio" name="radioA" value="a1"> A 1</label> <label><input type="radio" name="radioA" value="a2"> A 2</label> <label><input type="radio" name="radioA" value="a3"> A 3</label> <label><input type="radio" name="radioA" value="a4"> A 4</label> </fieldset> <fieldset> <legend>group B</legend> <label><input type="radio" name="radioB" value="b1"> B 1</label> <label><input type="radio" name="radioB" value="b2"> B 2</label> <label><input type="radio" name="radioB" value="b3"> B 3</label> <label><input type="radio" name="radioB" value="b4"> B 4</label> </fieldset> <fieldset> <legend>group C</legend> <label><input type="radio" name="radioC" value="c1"> C 1</label> <label><input type="radio" name="radioC" value="c2"> C 2</label> <label><input type="radio" name="radioC" value="c3"> C 3</label> <label><input type="radio" name="radioC" value="c4"> C 4</label> </fieldset> <button type="submit">submit</button> </form>