當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript练习----复选框全选，全不选，反选
生活随笔
收集整理的這篇文章主要介紹了
javascript练习----复选框全选，全不选，反选
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第一種方式：
<!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++) { 創(chuàng)建20個(gè)Li document.write("<li>");document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”這樣后端程序取得時(shí)候?yàn)閿?shù)組。document.write("</li>");}document.write("</ul>");document.write('<a href="javascript:sall()">全選 </a>'); 此a被點(diǎn)擊的時(shí)候調(diào)用sall方法，此處是調(diào)用不是賦值所以要加上“()”。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把當(dāng)前的checkbox對(duì)象傳遞給函數(shù)內(nèi)部方便調(diào)用該checkbox對(duì)象。var unames=document.getElementsByName("ids[]"); function sall(that){for (var i = 0; i <unames.length; i++) {unames[i].checked=that.checked;} } </script>
轉(zhuǎn)載于:https://www.cnblogs.com/xiaominwu/p/4348018.html
總結(jié)
以上是生活随笔為你收集整理的javascript练习----复选框全选，全不选，反选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网络爬虫依赖的架包
- 下一篇： 【JSP】JSP与oracle数据库交互