用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false，当所有checkbox都被选中时，全选按钮也被选中。
详解：
有两种方式使<input type="checkbox" />中的复选框被选中。
方法一:直接在HTML行间中添加checked属性。 eg：<input type="checkbox" checked />
方法二：使用javascript使input对象的checked="true"; eg: document.getElementsByTagName('input')[0].checked='true';
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>全选</title>
- <script>
- window.onload = function(){
- var aInput = document.getElementsByTagName('input');
- var oInput = aInput[0];
- var a = 0;
- var b = 0;
- aInput[0].onclick = function(){
- for (var i = 0; i < aInput.length; i++) {
- if(aInput[0].checked == true){
- aInput[i].checked = true;
- }else{
- aInput[i].checked = false;
- }
- }
- };
- for (var i = 1; i < aInput.length; i++) {
- aInput[i].onclick = function(){
- a = 0;
- b = 0;
- for (var i = 1; i < aInput.length; i++) {
- if (aInput[i].checked == false) {
- a++;
- }else {
- b++;
- }
- }
- if(a>0){
- oInput.checked = false;
- }else if(b==aInput.length-1){
- oInput.checked = true;
- };
- };
- }
- };
- </script>
- </head>
- <body>
- <p><input type="checkbox" name="" />全选</p>
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- <input type="checkbox" name="" /><br />
- </body>
- </html>
我的微信
这是我的微信扫一扫
