DOM练习 选择框、表格添加、变色

多个选择框，三个按钮，显示：全选、反选、不选

html部分，建立五个多选框，三个按钮

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button onClick="quan()">全选</button>//全选按钮
<button onClick="fan()">反选</button>//反选按钮
<button onClick="bu()">不选</button>//不选按钮

显示结果：

 

表单中的多选按钮：

<input type="checkbox"  checked> 内容

checked 属性是一个布尔属性，默认选中，默认返回值为true.，选中为true,不选中为false.

var inputdom = [];//多选框
window.onload = function () {
    inputdom = document.getElementsByTagName("input");//获取多选框
}
/*功能：全部选中*/
function quan() {
    for (var i = 0; i < inputdom.length; ++i) {
        inputdom[i].checked = true;
    }
}
/*功能：反向选择*/
function fan() {
    for (var i = 0; i < inputdom.length; ++i) {
        console.log(inputdom.length)
        if (inputdom[i].checked == true) {
            inputdom[i].checked = false;
        } else {
            inputdom[i].checked = true;
        }
    }
}
/*功能：全部不选*/
function bu() {
    for (var i = 0; i < inputdom.length; ++i) {
        inputdom[i].checked = false;
    }
}

2、表格添加行、删除行、隔行变色、移入变色

html中新建表头