JavaScript复选框（全选/全不选反选）

一时失言乱红尘 2022-05-17 01:46 228阅读 0赞

实例代码：

1 JS代码：

<script type="text/javascript">  
   window.οnlοad=function()\{  
      
     function myClick(id,fun)\{  
         var btn=document.getElementById(id);  
         btn.οnclick=fun;  
     \}    
     var check=document.getElementsByName("items");  
     var btn=document.getElementById("checkAllBox");  
     myClick("checkAllBox",function()\{  
         for(var i=0;i<check.length;i++)\{  
                check\[i\].checked=this.checked;  
            \}  
         \});  
     myClick("checkAllBtn",function()\{  
        for(var i=0;i<check.length;i++)\{  
            check\[i\].checked=true;  
        \}  
        if(!btn.checked)\{  
            btn.checked=true;  
        \}   
     \});  
     myClick("checkNoBtn",function()\{  
            for(var i=0;i<check.length;i++)\{  
                check\[i\].checked=false;  
            \}  
            if(btn.checked)\{  
                btn.checked=false;  
            \}  
         \});  
     myClick("checkRevBtn",function()\{  
         btn.checked=true;  
            for(var i=0;i<check.length;i++)\{  
                check\[i\].checked=!check\[i\].checked;  
                if(!check\[i\].checked)\{  
                     btn.checked=false;       
                 \}  
            \}  
         \});

for(var i=0;i<check.length;i++)\{  
         check\[i\].οnclick=function()\{  
             btn.checked=true;  
             for(var j=0;j<check.length;j++)\{  
                 if(!check\[j\].checked)\{  
                     btn.checked=false;  
                     break;       
                 \}  
                       
             \}  
         \};  
     \}  
   \};  
</script>

2 HTML代码：

<form method="post" action="">  
   你爱好的运动是？<input type="checkbox" id="checkAllBox">全选/全不选  
   <br/>  
   <input type="checkbox" name="items" value="篮球">篮球  
   <input type="checkbox" name="items" value="足球">足球  
   <input type="checkbox" name="items" value="棒球">棒球  
   <input type="checkbox" name="items" value="网球">网球  
   <br>  
   <input type="button" id="checkAllBtn" value="全选">  
   <input type="button" id="checkNoBtn" value="全不选">  
   <input type="button" id="checkRevBtn" value="反选">  
   <input type="button" id="sendBtn" value="提交">  
</form>

运行代码后，即可实现 全选/全不选 反选等操作。

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery复选框全选反选操作

<!DOCTYPE html> <html > <head> <title> jquery-ajax </title> <sc

刺骨的言语ヽ痛彻心扉/ 2022年08月18日 12:09/ 0 赞/ 228 阅读

相关 jquery 复选框全选、取消全选、全选按钮在未全选状态不选

代码： <input type="checkbox" name="chooseAll" οnclick="checkAll()">全选 <input type

系统管理员/ 2022年06月02日 04:27/ 0 赞/ 269 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 345 阅读

相关 JavaScript复选框（全选/全不选反选）

实例代码： 1 JS代码： <script type="text/javascript"> window.οnlοad=function()\{

一时失言乱红尘/ 2022年05月17日 01:46/ 0 赞/ 229 阅读

相关 jquery实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用j

喜欢ヅ旅行/ 2022年04月06日 08:10/ 0 赞/ 270 阅读

相关原生js实现复选框全选全不选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和

小鱼儿/ 2022年04月06日 07:56/ 0 赞/ 360 阅读

相关 jquery实现复选框的全选与全不选与反选

<html> <head> <meta charset="utf-8" /> <title>全选/全不选/反选</title>

古城微笑少年丶/ 2022年04月03日 06:26/ 0 赞/ 246 阅读

相关 jQuery实现复选框全选和全不选

第一种方法： <!--实现td框全选th框自动选的两种方法： 1.根据已经选择的td框的数量，若全选则选 2.遍历td框，若全选则选 --

旧城等待，/ 2021年12月10日 00:59/ 0 赞/ 371 阅读

相关 javascript 复选框（checkbox）全选/全不选/反选

其实很简单，先分析一下效果分析：　　1，点击全选/全不选　　　全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反　　2，点击反选按钮

た入场券/ 2021年11月19日 14:24/ 0 赞/ 505 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 467 阅读