如何从切换开关获取输入的JavaScript代码

Question

我在我的JavaScript代码中有一个切换开关：

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>`
  );

它的展示效果很棒，如我们在这里看到的那样，可以开关。

我的问题是它没有做任何事。如果打开，我想将变量设置为true，关闭时设置为false。

假设我有一个var isRequired，我想通过这个切换开关来设置它。我想要做类似于以下的事情:

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

有人知道我该怎么做吗？谢谢。

- Chris Costa

Answer 1

以下是翻译的结果：

这里是一个简单的例子。

在您的复选框上创建一个 eventListener，以及一个 bool 变量。

isChecked = isChecked ? false : true; 基本上意味着如果值为 false，则将其设置为 true，反之亦然。

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" />

- aca

Answer 2

尝试这个。

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)

- Dinesh Jangir