Olá, estou criando uma extensão pro Chrome para ativar algumas funções através de checkbox. Como exemplo para teste, coloquei que se o resultado fosse true, teria que mostrar checked
no console.log
, o mesmo para se fosse false (unchecked
). Por algum motivo o código não funciona.
Segue o código abaixo.
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('onoff').addEventListener('click', function(){
function verificarCheckBox1() {
var check = document.getElementById('onoff');
for (var i=0;i<check.length;i++){
if (check[i].checked == true){
console.log('Checked')
} else {
console.log('UnChecked')
}
}
}
function verificarCheckBox2() {
var check = document.getElementById('onoff2');
for (var i=0;i<check.length;i++){
if (check[i].checked == true){
console.log('Checked')
} else {
console.log('UnChecked')
}
}
}
})
}
)
body {
width: 300px;
height: 200px;
background-color: #422256;
}
.toggle {
margin-bottom: 40px;
}
.toggle > input {
display: none;
}
.toggle > label {
position: relative;
display: block;
height: 20px;
width: 44px;
background: #898989;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s ease;
}
.toggle > label:after {
position: absolute;
left: -2px;
top: -3px;
display: block;
width: 26px;
height: 26px;
border-radius: 100px;
background: #fff;
box-shadow: 0px 3px 3px rgba(0,0,0,0.05);
content: '';
transition: all 0.3s ease;
}
.toggle > label:active:after {
transform: scale(1.15, 0.85);
}
.toggle > input:checked ~ label {
background: #6fbeb5;
}
.toggle > input:checked ~ label:after {
left: 20px;
background: #179588;
}
.toggle > input:disabled ~ label {
background: #d5d5d5;
pointer-events: none;
}
.toggle > input:disabled ~ label:after {
background: #bcbdbc;
}
<html>
<head>
<title>Auto Refresh - Linx</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="toggle">
<input id="onoff" type="checkbox">
<label for="onoff"></label>
</div>
<div class="toggle">
<input id="onoff2" type="checkbox">
<label for="onoff2"></label>
</div>
</body>
</html>