基于JavaScript实现复选框的全选和取消全选       这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js复选框的全选和取消全选的具体代码，供大家参考，具体内容如下

效果图：

测试代码如下：

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title /title 
 style 
 li{list-style: none;}
 /style 
 /head 
 body 
 div 
 label input type="checkbox" name="wp" value="wpa"/ 液体 /label 
 /li 
 label input type="checkbox" name="wp" value="wpb"/ 粉末 /label 
 /li 
 label input type="checkbox" name="wp" value="wpc"/ 仿牌 /label 
 /li 
 label input type="checkbox" name="wp" value="wpd"/ 纯电池 /label 
 /li 
 label input type="checkbox" name="wp" value="wpe"/ 危险品 /label 
 /li 
 label input type="checkbox" name="wp" value="wpd"/ 配套电池 /label 
 /li 
 label input id="allChecked" type="button" name="sel" value="全选/取消" / /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 

直接复制代码可用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。