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>