Question

我创建了复选框及其标签。当我选中复选框时，下面会出现一个div，当我取消选中它时，它会消失。我的问题是，当我取消选中复选框时，标签也会变得黯然失色。这只发生在chrome中。任何人都可以帮助我了解这个问题的根本原因。

我的代码

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script>
    function change() {
      {
        if (document.getElementById("abc").style.display == 'none') {
          document.getElementById("abc").style.display = 'block';
        } else {
          document.getElementById("abc").style.display = 'none';
        }
      }
    }
  </script>
</head>

<body>
  <div>
    <input type="checkbox" name="AUTO" id="AUTO" onclick="change();">
    <label id="AUTOMATIC" for="AUTO">
      Checkbox Label.
    </label>
    <div id="abc" style="display:none;">
      Hi
    </div>
  </div>
</body>

</html>

Answer 1

添加以下行，这解决了问题

    } else {
      document.getElementById("abc").style.display = 'none';
    }

    document.getElementById("AUTOMATIC").style.display = 'none';
    document.getElementById("AUTOMATIC").offsetHeight ;
    document.getElementById("AUTOMATIC").style.display = '';
  }

在Chrome中取消选中时，复选框的标签会消失（仅限）

1 个答案: