當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
【javascript】checkbox——类似邮箱全选功能
生活随笔
收集整理的這篇文章主要介紹了
【javascript】checkbox——类似邮箱全选功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
現在很多郵箱都有全選的功能，我也做了個練練手。
<!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title>checkbox</title> </head> <body><input type="checkbox" name="btn" id="btn"/><label for="btn">全選</label><br/><input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">選項1</label><br/><input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">選項2</label><br/><input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">選項3</label><br/><input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">選項4</label><br/><input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">選項5</label><br/><input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">選項6</label><br/><input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">選項7</label><br/><input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">選項8</label><br/><input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">選項9</label><br/><input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">選項10</label><br/> </body> </html> <script type="text/javascript"> window.onload = function(){var oBtn = document.getElementById('btn');var oInput = document.getElementsByName('choose');for(var i = 0;i < oInput.length; i++){oInput[i].onclick = function(){if(this.checked){var allCheck = true;for(var j = 0;j < oInput.length; j++){if(!(oInput[j].checked)){allCheck = false;}};if(allCheck){oBtn.checked = true;}else{oBtn.checked = false;}}else{oBtn.checked = false;}}};//全選 oBtn.onclick = function(){if(oBtn.checked){for(var i = 0;i < oInput.length; i++){oInput[i].checked = true;}} else {for(var i = 0;i < oInput.length; i++){oInput[i].checked = false;}}}; } </script>只做了全選的功能，反選的功能還沒有做，以后補上。由于水平有限，感覺以上代碼還可以簡化，求指點。
總結
以上是生活随笔為你收集整理的【javascript】checkbox——类似邮箱全选功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CMD-NET命令详解、NET命令大全（
- 下一篇： gradle idea java ssm