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');&nbsp;document.addEventListener('DOMContentLoaded', function() {&nbsp; &nbsp; var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');&nbsp; &nbsp; function isChecked() {&nbsp; &nbsp; &nbsp; if (checkbox.checked ) {&nbsp; &nbsp; &nbsp; &nbsp; // do this&nbsp; &nbsp; &nbsp; &nbsp; console.log('Checked');&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // do that&nbsp; &nbsp; &nbsp; &nbsp; console.log('Not checked');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; checkbox.addEventListener('change', function() {&nbsp; &nbsp; &nbsp; isChecked();&nbsp; &nbsp; });&nbsp; &nbsp; isChecked();&nbsp; });<div id="auto-admit">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="mdc-switch">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="mdc-switch__track"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="mdc-switch__thumb-underlay">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="mdc-switch__thumb"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="checkbox"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="autoadmit-switch"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="mdc-switch__native-control"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; role="switch"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-checked="false"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="autoadmit-switch-label"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="mdc-button switch-label"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for="autoadmit-switch"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >Auto admit</label&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>