zoukankan      html  css  js  c++  java
  • js:全选和全不选(获取属性、getElementById方法与getElementsByName方法)

    1、全选和全不选函数:

    <script>
                function checkAll(){
                    var checkAllEle = document.getElementById("checkAll");
                    if(checkAllEle.checked==true){
                        var checkOnes = document.getElementsByName("checkOne");
                        for(var i=0;i<checkOnes.length;i++){
                            checkOnes[i].checked=true;
                        }
                    }else{
                        var checkOnes = document.getElementsByName("checkOne");
                        for(var i=0;i<checkOnes.length;i++){
                            checkOnes[i].checked=false;
                        }
                    }
                }
    </script>
    getElementById方法:返回对拥有指定ID的第一个对象的引用。
    getElementsByName方法:返回带有指定名称的对象的集合。
     <tr>
                	<th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
    				<th bgcolor="blanchedalmond "align="middle" >序号</th>              
    				<th bgcolor="blanchedalmond "align="middle ">学号</th>
    				<th bgcolor="blanchedalmond "align="middle ">姓名</th>
    				<th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
    				<th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
    				<th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
                </tr>
                
    			<tr>
    				<td><input type="checkbox" name="checkOne"/></td>
    				<td align="middle ">1</td>
    				<td align="middle ">20100300201</td>
    				<td align="middle ">张小丽</td>
    				<td align="middle ">95</td>
    				<td align="middle ">95</td>
    				<td align="middle ">95</td>
    			</tr>
    
    			<tr>
    				<td><input type="checkbox" name="checkOne"/></td>
    				<td bgcolor="grey "align="middle ">2</td>
    				<td bgcolor="grey "align="middle ">20100300202</td>
    				<td bgcolor="grey "align="middle ">李宁</td>
    				<td bgcolor="grey "align="middle ">90</td>
    				<td bgcolor="grey "align="middle ">88</td>
    				<td bgcolor="grey "align="middle ">89</td>
    			</tr>
    
    			<tr>
    				<td><input type="checkbox" name="checkOne"/></td>
    				<td align="middle ">3</td>
    				<td align="middle ">20100300203</td>
    				<td align="middle ">刘梅</td>
    				<td align="middle ">98</td>
    				<td align="middle ">92</td>
    				<td align="middle ">95</td>
    			</tr>
    
    			<tr>
    				<td><input type="checkbox" name="checkOne"/></td>
    				<td bgcolor="grey "align="middle ">4</td>
    				<td bgcolor="grey "align="middle ">20100300204</td>
    				<td bgcolor="grey "align="middle ">王刚</td>
    				<td bgcolor="grey "align="middle ">98</td>
    				<td bgcolor="grey "align="middle ">90</td>
    				<td bgcolor="grey "align="middle ">94</td>
    			</tr>
    
    			<tr>
    				<td><input type="checkbox" name="checkOne"/></td>
    				<td align="middle ">5</td>
    				<td align="middle ">20100300205</td>
    				<td align="middle ">郑军</td>
    				<td align="middle ">90</td>
    				<td align="middle ">85</td>
    				<td align="middle ">87</td>
    			</tr>
    
    			<tr>
    				<td><input type="checkbox" name="checkOne"/></td>
    				<td bgcolor="grey "align="middle ">6</td>
    				<td bgcolor="grey "align="middle ">20100300206</td>
    				<td bgcolor="grey "align="middle ">杨波</td>
    				<td bgcolor="grey "align="middle ">80</td>
    				<td bgcolor="grey "align="middle ">80</td>
    				<td bgcolor="grey "align="middle ">80</td>
    			</tr>
    
    getElementById方法获取的是与属性在同一行的复选框的状态,如果已经选中就用getElementsByName方法获取一个集合,并对集合进行遍历将复选框的状态变为选中,否则,将复选框全部变为未选中。
    2、完整代码:
    <html>
        <head>
            <meta charset="utf-8">
            <title>全选和全不选</title>
            <script>
                function checkAll(){
                    var checkAllEle = document.getElementById("checkAll");
                    if(checkAllEle.checked==true){
                        var checkOnes = document.getElementsByName("checkOne");
                        for(var i=0;i<checkOnes.length;i++){
                            checkOnes[i].checked=true;
                        }
                    }else{
                        var checkOnes = document.getElementsByName("checkOne");
                        for(var i=0;i<checkOnes.length;i++){
                            checkOnes[i].checked=false;
                        }
                    }
                }
            </script>
        </head>
    
        <body>
            <table width="600" border="1"  align="center" cellpadding="5" cellspacing="3">
                <caption>成绩登记表</caption>
                <tr>
                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
                    <th bgcolor="blanchedalmond "align="middle" >序号</th>              
                    <th bgcolor="blanchedalmond "align="middle ">学号</th>
                    <th bgcolor="blanchedalmond "align="middle ">姓名</th>
                    <th bgcolor="blanchedalmond "align="middle ">平时成绩</th>
                    <th bgcolor="blanchedalmond "align="middle ">期末成绩</td>
                    <th bgcolor="blanchedalmond "align="middle ">学期总成绩</th>
                </tr>
                
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td align="middle ">1</td>
                    <td align="middle ">20100300201</td>
                    <td align="middle ">张小丽</td>
                    <td align="middle ">95</td>
                    <td align="middle ">95</td>
                    <td align="middle ">95</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td bgcolor="grey "align="middle ">2</td>
                    <td bgcolor="grey "align="middle ">20100300202</td>
                    <td bgcolor="grey "align="middle ">李宁</td>
                    <td bgcolor="grey "align="middle ">90</td>
                    <td bgcolor="grey "align="middle ">88</td>
                    <td bgcolor="grey "align="middle ">89</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td align="middle ">3</td>
                    <td align="middle ">20100300203</td>
                    <td align="middle ">刘梅</td>
                    <td align="middle ">98</td>
                    <td align="middle ">92</td>
                    <td align="middle ">95</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td bgcolor="grey "align="middle ">4</td>
                    <td bgcolor="grey "align="middle ">20100300204</td>
                    <td bgcolor="grey "align="middle ">王刚</td>
                    <td bgcolor="grey "align="middle ">98</td>
                    <td bgcolor="grey "align="middle ">90</td>
                    <td bgcolor="grey "align="middle ">94</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td align="middle ">5</td>
                    <td align="middle ">20100300205</td>
                    <td align="middle ">郑军</td>
                    <td align="middle ">90</td>
                    <td align="middle ">85</td>
                    <td align="middle ">87</td>
                </tr>
    
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td bgcolor="grey "align="middle ">6</td>
                    <td bgcolor="grey "align="middle ">20100300206</td>
                    <td bgcolor="grey "align="middle ">杨波</td>
                    <td bgcolor="grey "align="middle ">80</td>
                    <td bgcolor="grey "align="middle ">80</td>
                    <td bgcolor="grey "align="middle ">80</td>
                </tr>
            </table>
    </body>
    </html>

      



  • 相关阅读:
    Java中的阻塞队列
    大数据笔记
    物联网小笔记
    shell 笔记
    Redis笔记
    rabbitMQ笔记
    java.lang.NoClassDefFoundError: freemarker/template/Template
    分布式系列学习-事务处理
    免费无需破解xshell xftp下载
    idea maven模块变灰或者java文件夹非 Sources文件夹
  • 原文地址:https://www.cnblogs.com/zhai1997/p/12230382.html
Copyright © 2011-2022 走看看