快捷導(dǎo)航

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

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

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

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

非常簡潔的幾行原生js實(shí)現(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; //得到那個(gè)總控的復(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ù)選框的文章請點(diǎn)擊專題：javascript復(fù)選框操作匯總、jquery復(fù)選框操作匯總

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

您可能感興趣的文章:

相關(guān)文章

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