基于JavaScript實現(xiàn)復(fù)選框的全選和取消全選
更新時間:2021年04月11日 15:10:48 作者:zuncle
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)復(fù)選框的全選和取消全選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js復(fù)選框的全選和取消全選的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
測試代碼如下:
<!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"/>危險品</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ù)制代碼可用。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 比較全的JS checkbox全選、取消全選、刪除功能代碼
- Javascript實現(xiàn)CheckBox的全選與取消全選的代碼
- js multiple全選與取消全選實現(xiàn)代碼
- js實現(xiàn)復(fù)選框的全選和取消全選效果
- javascript 全選/反選,取消選擇效果
- CheckBox為CheckBoxList實現(xiàn)全選或全取消選擇(js代碼實現(xiàn))
- JS小功能(checkbox實現(xiàn)全選和全取消)實例代碼
- JS控件ASP.NET的treeview控件全選或者取消(示例代碼)
- javascript 全選與全取消功能的實現(xiàn)代碼
- JS實現(xiàn)表單全選以及取消全選實例
相關(guān)文章
如何解決java.lang.NumberFormatException: null異常
這篇文章主要介紹了如何解決java.lang.NumberFormatException: null異常問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03學(xué)習(xí)javascript面向?qū)ο?javascript實現(xiàn)繼承的方式
這篇文章主要為大家介紹了javascript實現(xiàn)繼承的方式,學(xué)習(xí)javascript面向?qū)ο螅信d趣的小伙伴們可以參考一下2016-01-01基于Bootstrap實現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用,在手機(jī)瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項,怎么回事,如何解決呢?下面小編給大家分享下具體原因及解決辦法,一起看下吧2016-07-07在原生不支持的舊環(huán)境中添加兼容的Object.keys實現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09