Question 36229 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Check-Box is not checked through JavaScript – Jquery

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search