js實現(xiàn)全選和全不選

更新時間：2020年07月28日 14:30:13 作者：T暴風(fēng)雪

這篇文章主要為大家詳細介紹了js實現(xiàn)全選和全不選，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現(xiàn)全選和全不選的具體代碼，供大家參考，具體內(nèi)容如下

非常簡潔的幾行原生js實現(xiàn)全選和全不選，大神們可以在此基礎(chǔ)上加上反選功能。

<!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; //得到那個總控的復(fù)選框的選中狀態(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>

效果圖：

更多關(guān)于復(fù)選框的文章請點擊專題：javascript復(fù)選框操作匯總、jquery復(fù)選框操作匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復(fù)雜的多級樹
這篇文章主要介紹了用JavaScript實現(xiàn)一個代碼簡潔、邏輯不復(fù)雜的多級樹,需要的朋友可以參考下
2014-05-05
js將滾動條滾動到指定位置的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s將滾動條滾動到指定位置的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
Openlayers實現(xiàn)面積測量的方法
在Openlayers中,長度和面積的測量均依賴ol/sphere模塊,長度通過getLength方法計算,面積則通過getArea方法,面積測量不是計算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧
2024-11-11
Jquery 常用方法一覽表(集合)
之前腳本之家發(fā)過相關(guān)的文章，這里又是一篇關(guān)于jquery常用方法的收集整理，我們給放到一起，學(xué)習(xí)jquery的朋友可以參考下。
2010-03-03
基于JS實現(xiàn)html中placeholder屬性提示文字效果示例
這篇文章主要介紹了基于JS實現(xiàn)html中placeholder屬性提示文字效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2018-04-04
JS實現(xiàn)模態(tài)框拖拽動態(tài)效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)模態(tài)框拖拽動態(tài)效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
JS庫之wow.js使用方法
近日，在做項目中，需要做到滾動條滑到某個位置時，才能顯示動畫，網(wǎng)上查詢到有個wow.js可以達到要求，現(xiàn)在把使用方法做如下總結(jié)，需要的朋友參考下吧
2017-09-09
微信小程序時間標簽和時間范圍的聯(lián)動效果
這篇文章主要為大家詳細介紹了微信小程序時間標簽和時間范圍的聯(lián)動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-02-02
原生js實現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實例
這篇文章主要介紹了原生js實現(xiàn)的貪吃蛇網(wǎng)頁版游戲完整實例,可實現(xiàn)自主選擇游戲難度進行貪吃蛇游戲的功能,涉及javascript鍵盤事件及頁面元素的操作技巧,需要的朋友可以參考下
2015-05-05
深入理解JavaScript中的for循環(huán)
這篇文章主要給大家深入的介紹了JavaScript中的for循環(huán)，其中包括ES5中的三種for循環(huán)，分別是簡單for循環(huán)、for-in以及forEach，另外還詳細介紹了ES6新增的一種循環(huán)：for-of ，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02