0
183
ViewsHow to get input from toggle switch JavaScript
I have this toggle switch in my JavaScript code:
var questionRequired = document.createElement("div");
questionRequired.className = "mt-1 mb-1";
questionRequired.insertAdjacentHTML(
"beforeend",
`<label class="custom-control ios-switch">
<input type="checkbox" class="ios-switch-control-input" />
<span class="ios-switch-control-indicator"></span>
<span class="ios-switch-control-description">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.
·
Santiago Trujillo
2 answers
Answer question0
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" class="ios-switch-control-input" />
·
Santiago Trujillo
Report
0
try this
var checked = false
var questionRequired = document.createElement("div");
questionRequired.className = "mt-1 mb-1";
questionRequired.insertAdjacentHTML(
"beforeend",
`<label class="custom-control ios-switch">
<input onChange="isChecked()" type="checkbox" class="ios-switch-control-input" />
<span class="ios-switch-control-indicator">.
</span>
<span class="ios-switch-control-description">Required</span>
</label>`)
function isChecked(){
checked = checked?false:true
return checked
}
console.log(checked)
·
Santiago Trujillo
Report
Answer question