изменить кнопку переключения на JS - PullRequest
Новая
       10

изменить кнопку переключения на JS

0 голосов
/ 20 ноября 2018

У меня есть этот код, сделайте одну кнопку и получите некоторое значение от сервера.

, затем при загрузке (представление init) Я получил значение = 1, и мне нужно, чтобы тумблер включался автоматически.

код как показано ниже 

var value = 1;
.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 34px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.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: #2ab934;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(68px);
  -ms-transform: translateX(68px);
  transform: translateX(68px);
}

.on {
  display: none;
}

.on,
.off {
  color: white;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-family: Verdana, sans-serif;
}

input:checked+.slider .on {
  display: block;
}

input:checked+.slider .off {
  display: none;
}
<div align="center" id="bit00_3">
  <label class="switch">
    <input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
    <div class="slider round">
      <span class="on">ON</span>
      <span class="off">OFF</span>
    </div>
  </label>
</div>

, поэтому мне нужен некоторый JavaScript, чтобы сделать значение 1 в js для переключения кнопки.программно, и если 0 выключен.

Мне нужно использовать его только при инициализации

1 Ответ

0 голосов
/ 20 ноября 2018

Во-первых, у вас есть 2 идентификатора на той же HTML-странице, я изменил ввод на checkbox1.

Во-вторых, функция toggle не существует и не используется, по крайней мере, вНапример, я удалил его.

В-третьих, я удалил значение вашего ввода, потому что вы не использовали его, если вы хотите получить значение, просто используйте document.getElementById("checkbox1").checked или просто checkbox1.checked (сфлажок, присвоенный переменной)

Просто позвоните checkbox1.checked = {0 for unchecked and 1 for checked} или просто checkbox1.checked (с флажком, назначенным для переменной)

obs: я не использовал jquery, потому что не знал, если выиспользуете на этой странице 

  var value = 1;
  //you can put the checkbox in a variable, 
  //this way you do not need to do a javascript query every time you access the value of the checkbox
	var checkbox1 = document.getElementById("checkbox1")
	checkbox1.checked = value
	document.getElementById("checkbox1").addEventListener("change", function(element){
		console.log(checkbox1.checked)
	});
.switch {
        position: relative;
        display: inline-block;
        width: 100px;
        height: 34px;
      }

      .switch input {display:none;}

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ca2222;
        -webkit-transition: .4s;
        transition: .4s;
      }

      .slider.round {
        border-radius: 34px;
      }

      .slider.round:before {
        border-radius: 50%;
      }

      .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: #2ab934;
      }

      input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }

      input:checked + .slider:before {
        -webkit-transform: translateX(68px);
        -ms-transform: translateX(68px);
        transform: translateX(68px);
      }

      .on
      {
        display: none;
      }

      .on, .off
      {
        color: white;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-size: 10px;
        font-family: Verdana, sans-serif;
      }

      input:checked+ .slider .on
      {display: block;}

      input:checked + .slider .off
      {display: none;}
<div align="center" id="bit00_3">
  <label class="switch">
                <input type="checkbox" id="checkbox1">
                  <div class="slider round">
                    <span class="on">ON</span>
                    <span class="off">OFF</span>
                  </div>
              </label>
</div>
...