Question

我一直试图制作一个切换开关来启用/禁用我的程序的一部分。我用来制作按钮的代码来自w3schools

现在我想将功能添加到按钮，但完全卡住了。我想要做的是，如果按下开关，我希望我的程序激活我的代码的一部分，启用设置，或者如果开关已经打开，则禁用它。

所以我正在寻找的是一种在某处获得交换机价值的方法，并在if语句中使用它，例如：

if(switch== on){ 
   //do this;
} else{ 
   //do that;
}

我希望很清楚我想说的是什么。任何帮助表示赞赏。

Answer 1

我不知道这是否是您想要的，但通常情况下，您希望侦听在检查状态发生变化时触发的事件：

＆＃13;

document.addEventListener('DOMContentLoaded', function () {
  var checkbox = document.querySelector('input[type="checkbox"]');

  checkbox.addEventListener('change', function () {
    if (checkbox.checked) {
      // do this
      console.log('Checked');
    } else {
      // do that
      console.log('Not checked');
    }
  });
});

＆＃13;

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

＆＃13;

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

＆＃13;

当浏览器解析您的HTML并到达<script>标记时，它会立即执行其中的JavaScript。然而，可能发生的是，文档的其余部分尚未加载。

这意味着页面中的某些HTML元素尚未存在，您无法在JavaScript中访问它们。你必须等到元素被加载。

幸运的是，浏览器在加载页面内容时会触发事件。此事件称为DOMContentLoaded。

当您等待浏览器首先触发事件时，您可以确保可以访问DOM中的所有元素。

Answer 2

使用复选框元素的checked值查看当前状态

另请参阅此帖子中关于HTML中属性使用的Oded＆＃39; answer。

在JavaScript中，您可以检索您喜欢的任何风格的元素，然后只需查看checked属性的值是什么。

工作样本：

＆＃13;

function getValue() {
   var isChecked = document.getElementById("myCheckBox").checked;
    
   if(isChecked){
     console.log("Input is checked");
   } else {
     console.log("Input is NOT checked");
   }
}

＆＃13;

<label>
  <input id="myCheckBox" type="checkbox" > Toggle me
</label>

<br>
<br>

<button onclick="getValue()">Check value of above input</button>

＆＃13;

Answer 3

您可以使用JQuery解决此问题。将更改事件附加到输入复选框元素。

<input type="checkbox" id="myToggle"/>

$('#myToggle').change(function(){
    if(this.checked) {
        do this;
    }
    else {
        do that;
    }
});

Answer 4

这是一个非常基本的：

＆＃13;

function doStuff() {
    console.log("Hello World!")
}
function toggle(button) {
    if(button.value=="OFF") {
        button.value="ON"
        button.innerHTML="ON"
        this.interval = setInterval(doStuff, 1000);
    } else if(button.value=="ON") {
        button.value="OFF"
        button.innerHTML="OFF"
        clearInterval(this.interval)
    }
}

＆＃13;

<button onclick="toggle(this)" value="OFF">OFF</button>

＆＃13;

Answer 5

这只是一个复选框。你可以这样做 - ＆gt;

$(document).ready(function(){
	$('#on').on('change',function(){
    	if(this.checked){
    		$("#info").text("U checked me, place some code here");
    	}
        else{
        	$("#info").text("U unchecked me, another piece of code here");
        }
    });
});

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="switch">
  <input id="on" type="checkbox">
  <div class="slider"></div>
</label>
<p id="info"></p>

只需将您的代码放在if-else块中。

Javascript切换使用数据切换

5 个答案: