javascript - 选中状态上的复选框更改标题文本

Question

<input type="checkbox" id="chk">
<label for="chk"></label>
<h1 id="header">Lorem ipsum</h1>
var chk = document.querySelector('#chk');
var header = document.querySelector('#header');
if(chk.checked)
    header.innerHTML = "state 1";
else
    header.innerHTML = "Lorem ipsum";

所以。当选中复选框时，文本更改为“状态 1”当未选中(默认状态)时，文本返回到“状态 2”。此代码无法正常工作

Answer 1

嗨，兄弟!

<input type="checkbox" id="chk">
<label for="chk"></>
<h1 id="header">Lorem ipsum</h1>

`

var chk = document.querySelector('#chk');
var header = document.querySelector('#header');

chk.addEventListener('change', function (e) {
    if(chk.checked)
        header.innerHTML = "state 1";
    else
        header.innerHTML = "state 2";
});

`