Web小练习-复选框的全选以及反选效果

一个Web的小练习

Web小练习-复选框的全选以及反选效果_第1张图片

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1title>
    <script>
        window.onload=function(){
            //全选
            var allCheck=document.getElementById("all");
            allCheck.addEventListener('click',function(){
                all();
            },false);
            var allBoxes=document.getElementsByName("cb");
            function all(){
                if(allCheck.checked){
                    for(var i in allBoxes){
                        allBoxes[i].checked=true;
                    }
                }else{
                    for(var i in allBoxes){
                        allBoxes[i].checked=false;
                    }
                }
            }

            //反选
            var inverseBox=document.getElementById("inverseBox");
            inverseBox.addEventListener('click',function(){
                inverseCheck();
            },false);
            function inverseCheck(){
                var isAll=0;
                for(var i=0;iif(allBoxes[i].checked){
                        allBoxes[i].checked=false;
                        allCheck.checked=false;
                    }else{
                        allBoxes[i].checked=true;
                        isAll++;
                    }
                }
                if(isAll==allBoxes.length){
                    allCheck.checked=true;
                }
            }

            //一个一个选,全部选中后全选checked
            for(var i=0;ifunction(){
                    allBoxChange();
                }
            }
            function allBoxChange(){
                var isAll=0;
                for(var i=0;iif(allBoxes[i].checked){
                        continue;
                    }else{
                        isAll=1;
                        break;
                    }
                }
                if(isAll==0){
                    allCheck.checked=true;
                }else{
                    allCheck.checked=false;
                }
            }
        }
    script>
head>
<body>
<table id="newTab" border="1px">
    <tr id="1" style="background-color: yellow;text-align: center">
        <td><input type="checkbox" id="all" >全选td>
        <td>复选框全选实例td>
        <td>td>
        <td>td>
    tr>
    <tr id="2">
        <td><input type="checkbox" id="c1" name="cb">1td>
        <td>作用:td>
        <td>td>
        <td>td>
    tr>
    <tr id="3">
        <td><input type="checkbox" id="c2" name="cb">2td>
        <td>a.单击列头复选框全选或全不选子项td>
        <td>td>
        <td>td>
    tr>
    <tr id="4">
        <td><input type="checkbox" id="c3" name="cb">3td>
        <td>b.只要有一个子项没有选中,则取消列头的选中状态td>
        <td>td>
        <td>td>
    tr>
    <tr id="5">
        <td><input type="checkbox" id="c4" name="cb">4td>
        <td>c.当所有子项目选中时,列头复选框自动设置为选中状态td>
        <td>td>
        <td>td>
    tr>
    <tr id="6">
        <td><input type="checkbox" id="c5" name="cb">5td>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr id="7">
        <td><input type="checkbox" id="c6" name="cb">6td>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr id="8">
        <td><input type="checkbox" id="c7" name="cb">7td>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr id="9">
        <td><input type="checkbox" id="c8" name="cb">8td>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr id="10">
        <td><input type="checkbox" id="c9" name="cb">9td>
        <td>td>
        <td>td>
        <td>td>
    tr>
    <tr id="11">
        <td><input type="checkbox" id="c10" name="cb">10td>
        <td>d.将复选框反过来选td>
        <td>td>
        <td>td>
    tr>
    <tr id="12" style="background-color: #CCFFFF;text-align: center">
        <td><input type="checkbox" id="inverseBox">反选td>
        <td>反选示例td>
        <td>td>
        <td>td>
    tr>
table>
body>
html>

如果有错的或者可以改进的地方,请各位大神多多指点。

你可能感兴趣的:(web)