基于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異常問(wèn)題,具有很好的參考價(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-07
JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圣誕游戲
圣誕節(jié)即將來(lái)臨,大家都在發(fā)圣誕樹,小編今天就為大家介紹一個(gè)基于JavaScript實(shí)現(xiàn)的圣誕小游戲,文中的示例代碼簡(jiǎn)單易懂,感興趣的可以學(xué)習(xí)一下2021-12-12
在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇在原生不支持的舊環(huán)境中添加兼容的Object.keys實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
基于JS分頁(yè)控件實(shí)現(xiàn)簡(jiǎn)單美觀仿淘寶分頁(yè)按鈕效果
這篇文章主要介紹了基于JS分頁(yè)控件實(shí)現(xiàn)簡(jiǎn)單美觀仿淘寶分頁(yè)按鈕效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
JS簡(jiǎn)單實(shí)現(xiàn)仿百度控制臺(tái)輸出信息效果
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)仿百度控制臺(tái)輸出信息效果,涉及javascript中console.log函數(shù)的簡(jiǎn)單使用技巧,需要的朋友可以參考下2016-09-09

