?需求： 切換選中

? ? ? ? 1.1 點(diǎn)擊全選按鈕 將每一個復(fù)選框的狀態(tài)都變成選中

? ? ? ? 1.2 點(diǎn)擊不選按鈕 將每一個復(fù)選框的狀態(tài)都變成不選中

? ? ? ? 1.3 點(diǎn)擊反選按鈕 將選中的復(fù)選框變成不選中 將不選中的變成選中

代碼實(shí)現(xiàn)：

? // 1、獲取元素

? ? ? ? var btns = document.getElementsByTagName('button');

? ? ? ? var inps = document.getElementsByTagName('input');

? ? ? ? console.log(btns, inps);

? ? ? ? // 2、點(diǎn)擊事件 點(diǎn)擊全選按鈕

? ? ? ? btns[0].onclick = function () {
? ? ? ? ? ? // 3、每一個復(fù)選框

? ? ? ? ? ? for (var i = 0; i < inps.length; i++) {
? ? ? ? ? ? ? ? console.log(inps[i]);

? ? ? ? ? ? ? ? // 4、復(fù)選框的狀態(tài)都變成選中

? ? ? ? ? ? ? ? inps[i].checked = true;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 2、點(diǎn)擊事件 點(diǎn)擊反選按鈕

? ? ? ? btns[1].onclick = function () {
? ? ? ? ? ? // 3、每一個復(fù)選框

? ? ? ? ? ? for (var i = 0; i < inps.length; i++) {
? ? ? ? ? ? ? ? // 判斷 如果是選中 就變?yōu)椴贿x中 如果是不選中 就變?yōu)檫x中

? ? ? ? ? ? ? ? // ? ?if(inps[i].checked == true){
? ? ? ? ? ? ? ? // ? ? ? ?inps[i].checked = false;

? ? ? ? ? ? ? ? // ? ?}else{
? ? ? ? ? ? ? ? // ? ? ? ?inps[i].checked = true;

? ? ? ? ? ? ? ? // ? ?}

? ? ? ? ? ? ? ? inps[i].checked = !inps[i].checked;

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 2、點(diǎn)擊事件 點(diǎn)擊不選按鈕

? ? ? ? btns[2].onclick = function () {
? ? ? ? ? ? // 3、每一個復(fù)選框

? ? ? ? ? ? for (var i = 0; i < inps.length; i++) {
? ? ? ? ? ? ? ? // 4、復(fù)選框的狀態(tài)都變成不選中

? ? ? ? ? ? ? ? inps[i].checked = false;

? ? ? ? ? ? }

? ? ? ? }
?

總結(jié)

以上是生活随笔為你收集整理的切换选中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。