在很多的表單中我們都會

看到有一個這樣的功能，全選后進行一系列的操作。如

操作前

操作后

簡單的js實現(xiàn)

首先要定義多選框，在表頭可以使用id來定義同時添加onclick點擊事件

<input type="checkbox" id="all" onclick="checkAllCart(this.checked)"/>

其余的用name來定義。為什么不用id來定義，大家應(yīng)該都知道吧。

<input type="checkbox" name="one" value="${ct.key}" onclick="checkOneCart()"/>

js來實現(xiàn)

一步一步來先完成全選，全選很簡單，

function checkAllCart(v) {var chOne = document.getElementsByName("one");for (var i = 0; i < chOne.length; i++) {chOne[i].checked = v;}}

來解釋一下，獲取name為one 的選框，通過遍歷來進行選擇，這里的v就等于true或false。

還有一步是，當全選完成后進行反選，這時候就不是全部了，那又如何處理。

function checkOneCart() {var chOne = document.getElementsByName("one");var flag = true;for (var i = 0; i < chOne.length; i++) {if (!chOne[i].checked) {document.getElementById("all").checked = false;//將all的按鈕顯示去掉flag = false;break;}if (flag) {document.getElementById("all").checked = true;}}}

同樣獲取name為one的選框。同時定義一個flag來選true與false。

在遍歷全部的one的時候如果有一個不是true，這時候的全選會沒有勾，同時定義flag為false

如果flag為true的時候全選會再次出現(xiàn)對勾。

這樣一個簡單的全選就完成了

總結(jié)

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

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