基于JavaScript實(shí)現(xiàn)復(fù)選框的全選和取消全選
本文實(shí)例為大家分享了js復(fù)選框的全選和取消全選的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
測(cè)試代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head> <body> <div class="first"> <ul class="frtInfo"> <li class="same"> <label><input type="checkbox" name="wp" value="wpa"/>液體</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpb"/>粉末</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpc"/>仿牌</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpd"/>純電池</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpe"/>危險(xiǎn)品</label> </li> <li class="same"> <label><input type="checkbox" name="wp" value="wpd"/>配套電池</label> </li> <li class="same select"> <label><input id="allChecked" class="allChk" type="button" name="sel" value="全選/取消" onclick="selectAllDels()"/></label> </li> </ul> </div> <script src="../js/jquery-1.11.3.js"></script> <script type="text/javascript"> /*全選或取消全選*/ function selectAllDels(){ var allWp=document.getElementsByName("wp"); var selOrUnsel=false; for(var i=0; i<allWp.length;i++){ if(allWp[i].checked){ selOrUnsel=true; break; } } if (selOrUnsel){ allUnchk(allWp); }else{ allchk(allWp); } } function allchk(allWp){ for(var i=0; i<allWp.length;i++ ){ allWp[i].checked=true; } } function allUnchk(allWp){ for(var i=0; i<allWp.length;i++){ allWp[i].checked=false; } } </script> </body> </html>
直接復(fù)制代碼可用。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 比較全的JS checkbox全選、取消全選、刪除功能代碼
- Javascript實(shí)現(xiàn)CheckBox的全選與取消全選的代碼
- js multiple全選與取消全選實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)復(fù)選框的全選和取消全選效果
- javascript 全選/反選,取消選擇效果
- CheckBox為CheckBoxList實(shí)現(xiàn)全選或全取消選擇(js代碼實(shí)現(xiàn))
- JS小功能(checkbox實(shí)現(xiàn)全選和全取消)實(shí)例代碼
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- javascript 全選與全取消功能的實(shí)現(xiàn)代碼
- JS實(shí)現(xiàn)表單全選以及取消全選實(shí)例
相關(guān)文章
如何解決java.lang.NumberFormatException: null異常
這篇文章主要介紹了如何解決java.lang.NumberFormatException: null異常問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03學(xué)習(xí)javascript面向?qū)ο?javascript實(shí)現(xiàn)繼承的方式
這篇文章主要為大家介紹了javascript實(shí)現(xiàn)繼承的方式,學(xué)習(xí)javascript面向?qū)ο?,感興趣的小伙伴們可以參考一下2016-01-01基于Bootstrap實(shí)現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項(xiàng)的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用,在手機(jī)瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項(xiàng),怎么回事,如何解決呢?下面小編給大家分享下具體原因及解決辦法,一起看下吧2016-07-07JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圣誕游戲
圣誕節(jié)即將來臨,大家都在發(fā)圣誕樹,小編今天就為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的圣誕小游戲,文中的示例代碼簡(jiǎn)單易懂,感興趣的可以學(xué)習(xí)一下2021-12-12在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09基于JS分頁控件實(shí)現(xiàn)簡(jiǎn)單美觀仿淘寶分頁按鈕效果
這篇文章主要介紹了基于JS分頁控件實(shí)現(xiàn)簡(jiǎn)單美觀仿淘寶分頁按鈕效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11JS簡(jiǎn)單實(shí)現(xiàn)仿百度控制臺(tái)輸出信息效果
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)仿百度控制臺(tái)輸出信息效果,涉及javascript中console.log函數(shù)的簡(jiǎn)單使用技巧,需要的朋友可以參考下2016-09-09