js實現全選和全不選
更新時間：2020年07月28日 14:30:13 作者：T暴風雪
這篇文章主要為大家詳細介紹了js實現全選和全不選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現全選和全不選的具體代碼，供大家參考，具體內容如下
非常簡潔的幾行原生js實現全選和全不選，大神們可以在此基礎上加上反選功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全選、全不選</title>
</head>
<body>
<table border="1">
<tr>
<td><input type="checkbox" name="mmAll" onclick="All(this, 'mm[]')"></td>
</tr>
<tr><td><input type="checkbox" value="1" name="mm[]" class="check" id="ids1" onclick="Item(this, 'mmAll')"></td></tr>
<tr><td><input type="checkbox" value="2" name="mm[]" class="check" id="ids2" onclick="Item(this, 'mmAll')"></td></tr>
<tr><td><input type="checkbox" value="3" name="mm[]" class="check" id="ids3" onclick="Item(this, 'mmAll')"></td></tr>
<tr><td><input type="checkbox" value="4" name="mm[]" class="check" id="ids4" onclick="Item(this, 'mmAll')"></td></tr>
<tr><td><input type="checkbox" value="5" name="mm[]" class="check" id="ids5" onclick="Item(this, 'mmAll')"></td></tr>
<tr><td><input type="checkbox" value="6" name="mm[]" class="check" id="ids6" onclick="Item(this, 'mmAll')"></td></tr>
</table>
</body>
</html>
<script type="text/javascript">
//Check all
function All(e, itemName)
{
var aa = document.getElementsByName(itemName);
for (var i=0; i < aa.length; i++)
aa[i].checked = e.checked; //得到那個總控的復選框的選中狀態(tài)
}
//Single select
function Item(e, allName)
{
var all = document.getElementsByName(allName)[0];
if(!e.checked) all.checked = false;
else
{
var aa =document.getElementsByName(e.name);
for (var i=0; i<aa.length; i++)
if(!aa[i].checked) return;
all.checked= true;
}
}
</script>
效果圖：
更多關于復選框的文章請點擊專題：javascript復選框操作匯總、jquery復選框操作匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了用JavaScript實現一個代碼簡潔、邏輯不復雜的多級樹,需要的朋友可以參考下2014-05-05
下面小編就為大家?guī)硪黄猨s將滾動條滾動到指定位置的簡單實現方法。小編覺得挺不錯的， 現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
在Openlayers中,長度和面積的測量均依賴ol/sphere模塊,長度通過getLength方法計算,面積則通過getArea方法,面積測量不是計算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧2024-11-11
之前腳本之家發(fā)過相關的文章，這里又是一篇關于jquery常用方法的收集整理，我們給放到一起，學習jquery的朋友可以參考下。2010-03-03
基于JS實現html中placeholder屬性提示文字效果示例
這篇文章主要介紹了基于JS實現html中placeholder屬性提示文字效果,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下2018-04-04
這篇文章主要為大家詳細介紹了JS實現模態(tài)框拖拽動態(tài)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
近日，在做項目中，需要做到滾動條滑到某個位置時，才能顯示動畫，網上查詢到有個wow.js可以達到要求，現在把使用方法做如下總結，需要的朋友參考下吧2017-09-09
這篇文章主要為大家詳細介紹了微信小程序時間標簽和時間范圍的聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要介紹了原生js實現的貪吃蛇網頁版游戲完整實例,可實現自主選擇游戲難度進行貪吃蛇游戲的功能,涉及javascript鍵盤事件及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡單for循環(huán)、for-in以及forEach，另外還詳細介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02