JS——全选和全不选

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>

原文地址：https://www.cnblogs.com/zhai1997/p/12230382.html

时间： 2024-10-27 10:59:50

JS——全选和全不选的相关文章

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

asp.net中Repeater结合js实现checkbox的全选/全不选

前台界面代码: <input name="CheckAll" type="checkbox" id="CheckAll" value="" onclick="javascript:FormSelectAll('form1','cboxi','CheckAll',this);" /> //用于选择是否全选的复选框,用javascript函数"FormSelectAll('form1','

在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. 以下是我自己做的一个小例子,用来更简单明了的说明js全选和删除. 一.全选的说明:当选中全选的checkbox时,下面1-5都会选中,没有选中时1-5都不会选中,这个实现不难,步骤如下: 1.获取全选框的选中状态, 2.for循环设置所有的单选框的选中状态主要代码: //1.获取全选按钮 var

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" conten

js实现复选框的全选、全不选、反选

js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

JS 控制checkbox 获取全选全不选一行不选择全选则不被选择全部选择全选被选择

</pre><pre name="code" class="javascript"><span style="font-size:18px;">//点击全选按钮的事件操作 function selectAll(){ var allcheckBoxs=document.getElementsByName("iTo"); var select=document.getElementsByName

【JS】全选、不选、反选复选框（模板）

今天和大家分享一个全选.不选.反选复选框的例子,这个例子可以当做是一个模板使用,只要把一些数据适当改变以下就OK啦. 这是效果图: 代码如下: HTML部分: <input type="button" value="全选"/ id="btn1"> <input type="button" value="不选"/ id="btn2"> <input type=

js 判断复选框全选、全不选、反选、必选一个

一个挺使用的 js 代码片段, 判断复选框全选.全不选.反选.必选一个记录下, 搬来的思路: 修改数据的选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

js实现-小框框全选

点击全选下面单独的肉也会全选,再次点击取消一个一个点击肉,点完--全选也会被选上 HTML代码---CSS略 <table> <tr> <th> <input type="checkbox" id="checkAll" /> 全选/全不选 </th> <th>名字</th> <th>店铺</th> <th>价格</th> </t