Javascript 按钮没有返回正确的状态

Question

这是一个按钮的代码，但是当它被选中时它应该打印“已选中”但每次我按下它时，无论按钮的状态如何，它都会记录“未选中”。我该如何解决这个问题？

document.addEventListener('DOMContentLoaded', function() {
    var checkbox = document.querySelector('#auto-admit .mdc-switch');

    function isChecked() {
      if (checkbox.checked ) {
        // do this
        console.log('Checked');
      } else {
        // do that
        console.log('Not checked');
      }
    }
    checkbox.addEventListener('change', function() {
      isChecked();
    });

    isChecked();

  }

);

<div id="auto-admit">
                <div class="mdc-switch">
                    <div class="mdc-switch__track"></div>
                    <div class="mdc-switch__thumb-underlay">
                        <div class="mdc-switch__thumb"></div>
                        <input
                            type="checkbox"
                            id="autoadmit-switch"
                            class="mdc-switch__native-control"
                            role="switch"
                            aria-checked="false"
                        />
                    </div>
                </div>
                <label
                    id="autoadmit-switch-label"
                    class="mdc-button switch-label"
                    for="autoadmit-switch"
                    >Auto admit</label
                >
            </div>

Answer 1

您正在尝试获取 div 容器，而不是 input。

var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');

document.addEventListener('DOMContentLoaded', function() {
    var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');

    function isChecked() {
      if (checkbox.checked ) {
        // do this
        console.log('Checked');
      } else {
        // do that
        console.log('Not checked');
      }
    }
    checkbox.addEventListener('change', function() {
      isChecked();
    });

    isChecked();

  }

);

<div id="auto-admit">
                <div class="mdc-switch">
                    <div class="mdc-switch__track"></div>
                    <div class="mdc-switch__thumb-underlay">
                        <div class="mdc-switch__thumb"></div>
                        <input
                            type="checkbox"
                            id="autoadmit-switch"
                            class="mdc-switch__native-control"
                            role="switch"
                            aria-checked="false"
                        />
                    </div>
                </div>
                <label
                    id="autoadmit-switch-label"
                    class="mdc-button switch-label"
                    for="autoadmit-switch"
                    >Auto admit</label
                >
            </div>

Javascript 按钮没有返回正确的状态

Javascript button not returning correct status

javascript

checkbox