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

时间:2017-01-16 21:31:09

标签: javascript checkbox controls

<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";

因此。选中复选框时,文本会更改为&#34;状态1&#34; 未选中时(默认状态)文本返回&#34;状态2&#34;。 这段代码不能正常工作

2 个答案:

答案 0 :(得分:2)

嗨兄弟!

<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";
});

`

答案 1 :(得分:2)

这是一个简单的解决方案。希望它有所帮助!

&#13;
&#13;
function myFunction(mycheckbox, label) {
        document.getElementById(label).innerHTML = mycheckbox.checked ? "state 1" : "state 2";
}
&#13;
<input type="checkbox" onclick="myFunction(this, 'header');" />
<label for="chk" id="header">Lorem ipsum</label>
&#13;
&#13;
&#13;