?需求： 切換選中

? ? ? ? 1.1 點擊全選按鈕 將每一個復選框的狀態都變成選中

? ? ? ? 1.2 點擊不選按鈕 將每一個復選框的狀態都變成不選中

? ? ? ? 1.3 點擊反選按鈕 將選中的復選框變成不選中 將不選中的變成選中

代碼實現：

? // 1、獲取元素

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

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

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

? ? ? ? // 2、點擊事件 點擊全選按鈕

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

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

? ? ? ? ? ? ? ? // 4、復選框的狀態都變成選中

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

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 2、點擊事件 點擊反選按鈕

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

? ? ? ? ? ? for (var i = 0; i < inps.length; i++) {
? ? ? ? ? ? ? ? // 判斷 如果是選中 就變為不選中 如果是不選中 就變為選中

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

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

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

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

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 2、點擊事件 點擊不選按鈕

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

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

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

? ? ? ? ? ? }

? ? ? ? }
?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。