快捷導(dǎo)航

javaScript實(shí)現(xiàn)復(fù)選框全選反選事件詳解

更新時(shí)間：2020年11月20日 15:07:21 作者：Z_唐

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

本文實(shí)例為大家分享了javaScript實(shí)現(xiàn)復(fù)選框全選反選的具體代碼，供大家參考，具體內(nèi)容如下

代碼

<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <title></title>

 <script>

 window.onload=function(){
  var selAll=document.getElementById("selAll");
  var hobbys=document.getElementsByName("hobby");
  var fx=document.getElementById("fx");  
  var myClick=document.getElementById("xz");

  function myClick(){   
  alert("hello");
  }


  //全選事件
  selAll.onclick=function(){
  if(selAll.checked == true){
   for ( var i=0; i<hobbys.length; i++) {
   hobbys[i].checked=true;
   }
  }else{
   for ( var i=0; i<hobbys.length; i++) {
   hobbys[i].checked=false;
   }
  }


  }

  //反選事件
  fx.onclick=function(){

  for (var i=0; i<hobbys.length; i++) {
   var b=hobbys[i];
   if (b.checked == true) {
   b.checked=false
   }else{
   b.checked=true;
   }
  }

  }
 }
 </script>
</head>
<body>

 <span onclick="myClick()" id="xz"><input type="checkbox" id="selAll"/>全選</span>
 <button id="fx">反選</button></br>
 <input type="checkbox" name="hobby" />羽毛球
 <input type="checkbox" name="hobby"/>繪畫
 <input type="checkbox" name="hobby"/>唱歌
 <input type="checkbox" name="hobby"/>跳舞
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
這篇文章主要為大家詳細(xì)介紹了bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JavaScript前后端JSON使用方法教程
這篇文章主要給大家介紹了關(guān)于JavaScript前后端JSON使用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
利用ECharts.js畫K線圖的方法示例
這篇文章主要給大家介紹了關(guān)于利用ECharts.js畫K線圖的相關(guān)資料,，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
JavaScript中Dom操作實(shí)例詳解
這篇文章主要介紹了JavaScript中Dom操作,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對dom元素節(jié)點(diǎn)增刪改查相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2019-07-07
JavaScript獲取當(dāng)前url路徑過程解析
這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
JavaScripts數(shù)組里的對象排序的24個(gè)方法(最新整理收藏)
文章介紹了24種在JavaScript中對數(shù)組進(jìn)行排序的方法,每種方法都有具體的示例和應(yīng)用場景,適合不同情況下的排序需求,感興趣的朋友跟隨小編一起看看吧
2025-01-01
javascript 中事件冒泡和事件捕獲機(jī)制的詳解
這篇文章主要介紹了javascript 中事件冒泡和事件捕獲機(jī)制的詳解的相關(guān)資料,網(wǎng)上的相關(guān)資料有很多，但是講的不是多清楚，通過本文希望能讓大家理解掌握，需要的朋友可以參考下
2017-09-09
利用JavaScript實(shí)現(xiàn)一個(gè)日期范圍選擇器
日期范圍選擇器是一個(gè)常見的Web應(yīng)用功能,它允許用戶選擇一個(gè)日期范圍,本文我們將使用JavaScript來實(shí)現(xiàn)這個(gè)功能,感興趣的小伙伴可以了解下
2024-01-01
使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例
這篇文章主要介紹了使用weixin-java-tools完成微信授權(quán)登錄、微信支付的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
詳解Electron如何實(shí)現(xiàn)截圖功能
Electron是一個(gè)用于構(gòu)建跨平臺桌面應(yīng)用程序的框架,它結(jié)合了Node.js和Chromium,本文主要介紹了如何使用Electron實(shí)現(xiàn)截圖功能,感興趣的可以了解一下
2024-12-12