我的JavaScript代码中有一个切换switch :

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

正如我们在这里看到的那样,它表现得很好,并且被打开和关闭.

Toggle switch

我的问题是,它不是什么都不做.我想在变量打开时将其设置为true,在关闭时将其设置为false.

假设我有var isRequired,我想通过这个切换switch 来设置它.我想做以下事情:

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

有人知道我怎么做吗?非常感谢.

推荐答案

下面是一个简化的示例.

checkbox上创建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" />

Javascript相关问答推荐

在带有背景图像和圆形的div中添加长方体阴影时的重影线

如何在coCos2d-x中更正此错误

为什么JPG图像不能在VITE中导入以进行react ?

Vaadin定制组件-保持对javascrip变量的访问

为什么云存储中的文件不能公开使用?

Phaserjs-创建带有层纹理的精灵层以自定义外观

JS Animate()方法未按预期工作

react -原生向量-图标笔划宽度

如何在尚未创建的鼠标悬停事件上访问和着色div?

在Press Reaction本机和EXPO av上播放单个文件

使用Java脚本在div中创建新的span标记

在Java脚本/类型脚本中覆盖父构造函数中的默认值

从对象数组上载图像(多个)

如何有条件地返回Java脚本中的函数?

需要将源自AJAX的数据添加到表中

如何在这个bootstrap-vue表中固定显示列名的顶部标题行?

在克隆和不克隆原始列表的情况下将元素添加到数组的最佳方法

将表单数据转换为多维数组

Reaction路由在身份验证后不会更改页面,只有在我刷新页面的情况下

如何在chart.js中绘制向后弯曲线