---

I was working on a project in that some situation comes out that:

• optionC is by default checked When someone checked optionA and optionB then optionC should unchecked When someone checked optionC after it unchecked then optionB should unchecked When someone check

ed optionB after it unchecked then optionA should unchecked--- Thats All! Here is my Code:

var optionA = document.getElementById("optionA");
var optionB = document.getElementById("optionB");
var optionC = document.getElementById("optionC");
optionC.checked = true;
[ optionA, optionB, optionC ].forEach(function(option) {
   option.addEventListener("click", function() {
      if(optionA.checked && optionB.checked){
        optionC.checked = false;
      }
     else if(optionA.checked && optionB.checked && optionC.checked){
       optionB.checked = false;
     }
       //Here also Code is missing
     else{
  optionC.checked = true;
     }
   });
});

<div>
  <input type="checkbox" id="optionA" name="optionA" />
  <label for="optionA">Option A</label>
  <input type="checkbox" id="optionB" name="optionB" />
  <label for="optionB">Option B</label>
  <input type="checkbox" id="optionC" name="optionC" />
  <label for="optionC">Option C</label>
</div>

But I am facing an Error That after optionC is unchecked user is not able to check it again

CodePudding user response：

Your code was wrong because you should also refer to the data of who the checkbox fired the click event, I fixed the code by using e.target to check who fired the event

var optionA = document.getElementById("optionA");
var optionB = document.getElementById("optionB");
var optionC = document.getElementById("optionC");
optionC.checked = true;
[ optionA, optionB, optionC ].forEach(function(option) {
   option.addEventListener("click", function(e) {
      const elem = e.target;
      if(elem == optionB) {
          if(optionC.checked)
            optionA.checked = false;
      }
      if(elem == optionA) {
          if(optionB.checked)
            optionC.checked = false;
      }
      if(elem == optionC) {
          if(optionA.checked)
            optionB.checked = false;
      }
   });
});

<div>
     A
     <input type="checkbox" id="optionA" />
</div>
<div>
     B
     <input type="checkbox" id="optionB" />
</div>
<div>
    C
    <input type="checkbox" id="optionC" />
</div>

CodePudding user response：

Just to clarify objective:

• #optionC is checked by default
• If both #optionA and #optionB^✥ are checked by the user, #optionC is unchecked
• If #optionB is checked by the user, #optionA is unchecked
• If #optionC is checked by the user, #optionB is unchecked

^{✥#optionB must be checked before #optionA is checked}

Details are commented in example

// Reference <form>
const abc = document.forms.ABC;
// Bind "change" event to <form>
abc.onchange = options;

/**
 * Event handler passes the Event object by default
 * io - Reference all <input>
 * chk - Reference the element the user un/checked
 * A, B, C - Each <input>
 * If the element the user un/checked has [name="option"]...
 * and if the <input> the user un/checked is #optionA AND
 * it's checked AND #optionB is checked...
 * uncheck #optionC then end function
 * and if the <input> the user un/checked is #optionB AND 
 * it's checked AND #optionA is checked...
 * uncheck #optionA then end function
 * and if the <input> the user un/checked is #optionC AND 
 * it's checked AND #optionB is checked...
 * uncheck #optionB then end function
 */
function options(event) {
  const io = this.elements;
  const chk = event.target;
  const A = io.optionA;
  const B = io.optionB;
  const C = io.optionC;

  if (chk.name === "option") {
    if (chk === A && A.checked && B.checked) {
      return C.checked = false;
    }
    if (chk === B && B.checked && A.checked) {
      return A.checked = false;
    }
    if (chk === C && C.checked && B.checked) {
      return B.checked = false;
    }
  }
}

<form id="ABC">
  <input id="optionA" name="option" type="checkbox">
  <label for="optionA">Option A</label>
  <input id="optionB" name="option" type="checkbox">
  <label for="optionB">Option B</label>
  <!--
    Add the checked attribute to #optionC to start it as checked by default
  -->
  <input id="optionC" name="option" type="checkbox" checked>
  <label for="optionC">Option C</label>
</form>