значение переключателя typescript и html

Короче говоря, мне нужно использовать тумблер, чтобы определить, какой из моих методов будет вызываться. Итак, я предполагаю, что вы можете получить логическое значение, относящееся к тому, включен переключатель или выключен? но как мне это получить?

Итак, я реализовал тумблер в html

<label class="switch">
 <input type="checkbox" id="ToggleswitchId" >
 <span class="slider round"></span>
</label>

Я видел, как кто-то делал что-то подобное с помощью javascript.

 var switchTrueFalse = document.getElementById('ToggleswitchId').checked

но все, что я получаю, это «Свойство« проверено »не существует для типа HTMLElement»


typescript angular html css toggleswitch
person LasseAndersen    schedule 12.02.2019    source источник
comment
.checked не является функцией. Это переменная, содержащая проверенное состояние.   -  person Zim84    schedule 12.02.2019
comment
Вы используете угловой 2?   -  person Abhishek Gautam    schedule 12.02.2019

Ответы (4)


arrow_upward
0
arrow_downward

checked не является методом. Это один из атрибутов <input>, который является логическим.

Итак, document.getElementById('ToggleswitchId').checked возвращает true при проверке

person dileepkumar jami    schedule 12.02.2019

arrow_upward
0
arrow_downward

checked — это свойство ввода флажка, которое возвращает true или false.

function clickCheckbox() {
  if (document.getElementById('ToggleswitchId').checked) {
    console.log("check")
  } else {
    console.log("uncheck");
  }
}
<label class="switch">
 <input type="checkbox" id="ToggleswitchId" onClick="clickCheckbox()" >call method
 <span class="slider round"></span>
</label>

person Pawan Kumar    schedule 12.02.2019
comment
Я пробовал ваш код и проверил, не работает. Свойство «checked» не существует для типа HTMLElement. - person LasseAndersen; 12.02.2019
comment
Вы используете Ангуляр? - person Pawan Kumar; 12.02.2019
comment
Я использую Angular CLI 7.1.4. - person LasseAndersen; 13.02.2019
comment
Поскольку вы новичок в переполнении стека, поэтому, к вашему сведению, вы также должны пометить вопрос с помощью angular, упомянуть все в вопросе с кодом, который вы пробовали. - person Pawan Kumar; 13.02.2019
comment
вы можете найти свой ответ здесь существует для типа htmlelement angular 4"> stackoverflow.com/questions/48002244/ - person Pawan Kumar; 13.02.2019
comment
Спасибо за помощь и за совет относительно stackoverflow. - person LasseAndersen; 13.02.2019

arrow_upward
0
arrow_downward

Поскольку это входной тег, попробуйте использовать HTMLInputElement вместо HTMLElement.

Вместо этого попробуйте использовать этот код и посмотрите, работает ли он:

document.getElementById("ToggleswitchId") as HTMLInputElement).checked
person Jayaraman    schedule 05.06.2020

arrow_upward
0
arrow_downward

Вам нужно вызвать функцию JavaScript для установки/снятия флажка.

function test() {
    var switchTrueFalse = document.getElementById('ToggleswitchId').checked;
    console.log(switchTrueFalse);
}
    
<label class="switch">
  <input type="checkbox" id="ToggleswitchId" onclick="test()" >
  <span class="slider round"></span>
</label>

person Husnain Sheikh    schedule 12.02.2019