选中状态复选框更改标题文本答案

【问题标题】：checkbox on checked state changes header text选中状态复选框更改标题文本
【发布时间】：2017-01-16 21:31:09
【问题描述】：

<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”。这段代码不能满足我的要求

【问题讨论】：

标签： javascript checkbox controls

【解决方案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";
});

【讨论】：

【解决方案2】：

这是一个简单的解决方案。希望对您有所帮助！

function myFunction(mycheckbox, label) {
        document.getElementById(label).innerHTML = mycheckbox.checked ? "state 1" : "state 2";
}

<input type="checkbox" onclick="myFunction(this, 'header');" />
<label for="chk" id="header">Lorem ipsum</label>

【讨论】：