How to get input from toggle switch JavaScript-CodePudding

I have this toggle switch in my JavaScript code:

var questionRequired = document.createElement("div");
  questionRequired.className = "mt-1 mb-1";
  questionRequired.insertAdjacentHTML(
    "beforeend",
    `<label >
       <input type="checkbox"  />
       <span ></span>
       <span >Required</span>
     </label>`
  );

It is showing nicely and is being turned on and off as we can see here.

My problem is that it's not doing nothing. I want to to set a variable as true if it's turned on and to false when it's turned off.

Let's say I have var isRequired and I wan to set it through this toggle switch. I want to do something like:

if (questionRequired.isTurnedOn)
    isRequired = true;
else isRequired = false;

Does anyone kow how I can do this? Thank you.

CodePudding user response：

Here is a simplified example.

Create an eventListener on your checkbox, as well as bool variable.

isChecked = isChecked ? false : true; basically means that if the value is false, set it to true, and the otherway around.

var chxBox = document.querySelector(".ios-switch-control-input");
var isChecked = false; //false because the checkbox is unchecked on page load
chxBox.addEventListener("change", function(){
isChecked = isChecked ? false : true;
console.log(isChecked)
})

 <input type="checkbox"  />

CodePudding user response：

try this

var checked = false
var questionRequired = document.createElement("div");
questionRequired.className = "mt-1 mb-1";
questionRequired.insertAdjacentHTML(
"beforeend",
`<label >
   <input onChange="isChecked()" type="checkbox"  />
   <span >. 
   </span>
   <span >Required</span>
 </label>`)

function isChecked(){
 checked = checked?false:true
 return checked
}
console.log(checked)