正反選案例
1、使用的原理
- 全選操作，就是遍歷整個表格中的每一項，將checked設置爲True
- 取消則是將checked全變爲false就行
- 反選則是非原來的狀態（原來選中，非就是不選中）
2、練習代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正反選</title>
</head>
<body>
<button onclick="allSelect()">全選</button>
<button onclick="cancel()">取消</button>
<button onclick="reverse()">反選</button>
<table border="2px">
<tr>
<td><input type="checkbox"></td>
<td>培根</td>
<td>雞排套餐</td>
<td>白開水</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>牛肉飯</td>
<td>雞腿</td>
<td>冰淇淋</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>漢堡</td>
<td>瘦肉粥</td>
<td>奶茶</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>雞排</td>
<td>薯條</td>
<td>奶昔</td>
</tr>
</table>
<script>
function allSelect(){
//全選操作，就是遍歷整個表格中的每一項，將checked設置爲True
var inputs=document.getElementsByTagName("input"); //獲取表格所有input元素
for(var i=0; i<inputs.length; i++)
{
inputs[i].checked=true;
}
}
function cancel(){
//取消則是將checked全變爲false就行
var inputs=document.getElementsByTagName("input"); //獲取表格所有input元素
for(var i=0; i<inputs.length; i++)
{
inputs[i].checked=false;
}
}
function reverse(){
var inputs=document.getElementsByTagName("input"); //獲取表格所有input元素
for(var i=0; i<inputs.length; i++)
{
//反選：就非原來的狀態
inputs[i].checked= !inputs[i].checked;
}
}
</script>
</body>
</html>
3、測試結果
這樣一個正反選案例就實現了
二級聯動案例
1、原理分析
用onchange來動態改變區域內容
通過索引來獲取城市，然後將城市放到一個集合變量中
最後遍歷每個城市，將城市添加到對應的省份中
2、練習代碼
代碼塊中已經有非常詳細的註釋，所以看代碼結合CSS內容纔是最容易理解的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二級聯動</title>
</head>
<body>
<select id="province">
<option value="">請選擇省份</option>
</select>
<select id="cities">
<option>請選擇城市</option>
</select>
<script>
//通過js來動態添加省份和城市
data={"福建省":["莆田市","龍巖市","福州市","廈門市"],
"河北省":["石家莊","保定","邯鄲","廊坊"],
"四川省":["成都市","綿陽市","德陽市","眉山市"]};
var ele_pro=document.getElementById("province");
var ele_cit=document.getElementById("cities");
//可以用in來遍歷，獲得省份
for(var i in data)
{
// console.log(i);
var ele=document.createElement("option"); //創建一個選項標籤
ele.innerHTML=i; //在再將值添加進select中
ele_pro.appendChild(ele);
}
//用onchange來動態改變區域內容
ele_pro.onchange=function(){
console.log(this.selectedIndex); //獲取選項的索引值
console.log(this.options[this.selectedIndex]); //將索引值代入省份選項中，即得到對應的城市
//將獲得的城市放到citys變量中
var citys=data[this.options[this.selectedIndex].innerHTML]
//爲了防止城市的不斷累加，需要在遍歷省份之前將值都清除
ele_cit.options.length=1; //這裏留了一個1，表示“請選擇城市”該選項不清空
//遍歷每個城市，將城市添加到對應的省份中
for(var i=0; i<citys.length; i++)
{
var ele=document.createElement("option"); //創建選項框
ele.innerHTML=citys[i]; //以城市名作爲索引，將城市值打印到頁面上
ele_cit.appendChild(ele); //添加進城市選擇框裏
}
}
</script>
</body>
</html>
3、測試結果
這樣一個二級聯動的效果就出來了，當我們選擇前面的省份時，第二個選項框就會變成對應省份的那些城市，實現動態的聯動效果