當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript练习----复选框全选，全不选，反选
生活随笔
收集整理的這篇文章主要介紹了
javascript练习----复选框全选，全不选，反选
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一種方式：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>body{color: #000}</style> <script> document.write("<ul>"); for (var i = 0; i <20; i++) { 創建20個Li document.write("<li>");document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”這樣后端程序取得時候為數組。document.write("</li>");}document.write("</ul>");document.write('<a href="javascript:sall()">全選 </a>'); 此a被點擊的時候調用sall方法，此處是調用不是賦值所以要加上“()”。document.write('<a href="javascript:nall()">全不選 </a>');document.write('<a href="javascript:fall()">反選 </a>');var unames=document.getElementsByName("ids[]");function sall(){for(var i=0;i<unames.length;i++){unames[i].checked="true";}}function nall(){for(var i=0;i<unames.length;i++){unames[i].checked="";}}function fall(){for(var i=0;i<unames.length;i++){if(unames[i].checked){unames[i].checked="";}else{unames[i].checked="true";}}} </script> </head> <body> </body> </html>第二種方式：
<script> document.write("<ul>"); for (var i = 0; i <20; i++) {document.write("<li>");document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff');document.write("</li>");}document.write("</ul>");document.write('<label for="sall"><input type="checkbox" id="sall" οnclick="sall(this)">全選</label>');this把當前的checkbox對象傳遞給函數內部方便調用該checkbox對象。var unames=document.getElementsByName("ids[]"); function sall(that){for (var i = 0; i <unames.length; i++) {unames[i].checked=that.checked;} } </script>
轉載于:https://www.cnblogs.com/xiaominwu/p/4348018.html
總結
以上是生活随笔為你收集整理的javascript练习----复选框全选，全不选，反选的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网络爬虫依赖的架包
- 下一篇： 【JSP】JSP与oracle数据库交互