Check-Box is not checked through JavaScript

Question

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

Haim Abeles · Accepted Answer · 2022-10-20 12:26:50Z

2

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>

edited Oct 20, 2022 at 12:26

answered Oct 20, 2022 at 12:13

Haim Abeles

1,0218 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moosa Imran Over a year ago

Thanks, you for guiding but still it doesn't meet to my requirement that when user select optionA then OptionB then the OptionA is unchecked instead of OptionC. Do you have any solution. I am trying for a couple of days but I can't. Once again Thanks

zer00ne · Accepted Answer · 2022-10-21 08:27:02Z

1

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>

answered Oct 21, 2022 at 8:27

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

2 Comments

Moosa Imran Over a year ago

Thanks you for guiding me in detail but is there is a way to check optionA first?

zer00ne Over a year ago

You're very welcome. Sure, as in the second rule wherein A and B closes C? You'll need to change what B closes or change it so B closes nothing and A closes C or B. You'll need to give me the details of the changes, as you can imagine there are several possibilities.

Collectives™ on Stack Overflow

Check-Box is not checked through JavaScript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related