多個選擇框，三個按鈕，顯示：全選、反選、不選

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中新建表頭

姓名：<input id="mingzi" type="text" placeholder="必填">
年齡：<input id="age" type="text" placeholder="必填">
<button onClick="add()">添加一行</button>//添加按鈕
<button onClick="color()">隔行變色</button>
<button onClick="">移入變色</button>
<table width="1000" border="1">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年齡</th>
        <th>操作</th>
    </tr>
</table>

顯示結果：

js中內容，建立三個方法，添加一行、隔行變色、移入變色

var tab=null;//獲取表格
var tr_push=[];//添加行
var td_push=[];//添加單元格
var namedom=null;
var agedom=null;
window.onload = function () {
    tab=document.getElementsByTagName("table")[0];//獲取表格
    tr=document.getElementsByTagName("tr");
    th=document.getElementsByTagName("th");
    namedom=document.getElementById("mingzi");
    agedom=document.getElementById("age");
}
/*功能：添加行*/
function add(){
     tr_push = document.createElement("tr");//創建<tr>標簽
    for (var i = 0; i < th.length; ++i) {        
        if (i == 0) {
            td_push = document.createElement("td");
            td_push.innerHTML = tr.length;
//第一列的內容ID，排序，為tr的長度
        }
        if (i == 1) {
            td_push = document.createElement("td");
            td_push.innerHTML = namedom.value;
//第二列的內容姓名，為提取姓名框的內容
        }
        if (i == 2) {
            td_push = document.createElement("td");
            td_push.innerHTML = agedom.value;
//第二列的內容姓名，為提取年齡框的內容
        }
        if (i == 3) {
            td_push = document.createElement("td");
            td_push.innerHTML = "<button onClick=‘shan(this)‘>刪除</button>";
//將一個button標簽作為i=3的內容
//點擊時，調用方法刪除
        }
        tr_push.appendChild(td_push);
    }
    tab.appendChild(tr_push);    
}
/*功能：刪除行*/
function shan(obj) {
    obj.parentNode.parentNode.remove();
//移除button所在標簽的父標簽的父標簽（tr）

}
/*功能：隔行變色*/
function color(){
    for(var i = 0; i < tr.length; i=i+2)
//隔行變色，所以    i=i+2
    tr[i].style.background = "red";    
//給tr添加樣式background     
}

DOM練習 選擇框、表格添加、變色