javaScript實(shí)現(xiàn)復(fù)選框全選反選事件詳解
本文實(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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)checkbox全選和反選示例
- js實(shí)現(xiàn)checkbox全選、不選與反選的方法
- JS實(shí)現(xiàn)的全選、全不選及反選功能【案例】
- AngularJS實(shí)現(xiàn)全選反選功能
- javaScript checkbox 全選/反選及批量刪除
- 利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果
- 兼容ie和firefox版本的js反選 全選 多選框
- js html css實(shí)現(xiàn)復(fù)選框全選與反選
- javascript實(shí)現(xiàn)簡(jiǎn)單的全選和反選功能
- JavaScript實(shí)現(xiàn)頁面一鍵全選或反選
相關(guān)文章
TypeScript聯(lián)合類型,交叉類型和類型保護(hù)
這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù),聯(lián)合類型就是定義一些類型,定義的變量只需要滿足任意一種類型即可,交叉類型就是需要滿足所有類型,交叉類型使用,更多內(nèi)容我們來看看下面文章詳細(xì)內(nèi)容吧2021-12-12JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊單選按鈕改變輸入框中文本域內(nèi)容的方法,涉及javascript單選按鈕控制頁面元素樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08基于Three.js實(shí)現(xiàn)3D玉兔效果的示例代碼
2022年中秋佳節(jié)即將來臨,中秋節(jié)是我們國(guó)家的傳統(tǒng)節(jié)日。而中秋與玉兔又往往會(huì)聯(lián)系在一起,本文將用Threejs做一只會(huì)動(dòng)的3D玉兔,感興趣的可以了解一下2022-08-08setTimeout 函數(shù)在前端延遲搜索實(shí)現(xiàn)中的作用詳解
這篇文章主要為大家介紹了setTimeout 函數(shù)在前端延遲搜索實(shí)現(xiàn)中的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12js根據(jù)手機(jī)客戶端瀏覽器類型,判斷跳轉(zhuǎn)官網(wǎng)/手機(jī)網(wǎng)站多個(gè)實(shí)例代碼
這篇文章主要介紹了js根據(jù)手機(jī)客戶端瀏覽器類型,判斷跳轉(zhuǎn)官網(wǎng)/手機(jī)網(wǎng)站多個(gè)實(shí)例代碼,需要的朋友可以參考下2016-04-04bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤
這篇文章主要介紹了bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤的方法,需要的朋友可以參考下2017-05-05微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)的讓云朵飄效果
這篇文章主要介紹了微信小程序開發(fā)之a(chǎn)nimation循環(huán)動(dòng)畫實(shí)現(xiàn)的讓云朵飄效果,結(jié)合實(shí)例形式分析了animation結(jié)合js時(shí)間函數(shù)實(shí)現(xiàn)循環(huán)動(dòng)畫效果的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-07-07js阻止瀏覽器默認(rèn)行為的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨s阻止瀏覽器默認(rèn)行為的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05網(wǎng)絡(luò)之美 JavaScript中Get和Set訪問器的實(shí)現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了,對(duì)于從事Web開發(fā)的朋友們來說真是個(gè)好消息啊,希望將來有一天各個(gè)瀏覽器都能遵循統(tǒng)一的標(biāo)準(zhǔn)。今天要和大家分享的是JavaScript中的Get和Set訪問器,和C#中的訪問器非常相似。2010-09-09