基于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ū)ο?,感興趣的小伙伴們可以參考一下2016-01-01
基于Bootstrap實現(xiàn)的下拉菜單手機端不能選擇菜單項的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用,在手機瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項,怎么回事,如何解決呢?下面小編給大家分享下具體原因及解決辦法,一起看下吧2016-07-07
在原生不支持的舊環(huán)境中添加兼容的Object.keys實現(xiàn)方法
下面小編就為大家?guī)硪黄谠恢С值呐f環(huán)境中添加兼容的Object.keys實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09

