定义复选框的变量 - 始终为空

Question

我正在尝试获取“CSS-only”切换开关的状态（True/False/null 等）。但是我只会得到空值。我无法弄清楚为什么会这样，只是出于某种原因，复选框输入未按其默认方式运行。

  <div class="container">
    <label class="switch">
      <input type="checkbox" class="switch-input" id="switch">
      <span class="switch-label" data-on="External" data-off="Internal" id="switch"></span>
      <span class="switch-handle"></span>
    </label>
    </div>
<button id="btn">Alert</button>
<script>
var btn = document.getElementById('btn')

btn.addEventListener('click', function(){
// Get the checkbox
  var message_type = document.getElementById("switch.value");
     alert(message_type);
});
</script>

谢谢

Answer 1

值是属性，document.getElementById("switch").value 会 return 值（如果有的话），但 return 总是一样的，使用 document.getElementById("switch").checked.看这里：https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Answer 2

首先，您页面上的 2 个元素具有相同的 ID switch：输入和跨度。对于 DOM 个元素，有一个规则，即每个元素的 id 应该是唯一的。

在您的查询中：var message_type = document.getElementById("switch.value");您正试图通过 id switch.value 字面意思

获取元素

因此，想象一下只有输入具有唯一 ID switch 的情况，您可以使用以下方法获取其值：

document.getElementById("switch").value

或

document.getElementById("switch").checked

定义复选框的变量 - 始终为空

Define variable of checkbox - always null

javascript

variables

checkbox

toggle