Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> 软件教程>web前端使用JavaScript完成复选框的全选和全不选

web前端使用JavaScript完成复选框的全选和全不选

时间：2020-12-30 来源：互联网

不同于服务器端脚本语言，例如php与ASP，Javascript是客户端脚本语言，也就是说JavaScript是在用户的浏览器上运行，不需要服务器的支持而可以独立运行。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。

u=4232108336,1097274609&fm=26&gp=0.jpg

　　复选框的全选和全不选

　　需求分析

　　商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所有的商品

　　技术分析

　　checked="checked"选择复选框

　　事件:onclick点击事件

　　getElementsByTagName：返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。

　　getElementsByName：返回包含带有指定类名的所有元素的节点列表。

　　步骤分析

　　全选和全不选步骤分析:

　　1.确定事件:onclick单机事件

　　2.事件触发函数:checkAll()

　　3.函数要去做一些事情:

　　获得当前第一个checkbox的状态

　　获得所有分类项的checkbox

　　修改每一个checkbox的状态

　　代码实现

　　<!DOCTYPEhtml>

　　<html>

　　 <head>

　　 <metacharset="UTF-8">

<!--

　　 1.确定事件:文档加载完成onload

　　 2.事件要触发函数:init()

　　 3.函数:操作页面的元素

　　要操作表格中每一行

　　动态的修改行的背景颜色

　　 -->

　　 functioninit(){

　　 //得到表格

　　 vartab=document.getElementById("tab");

　　 //得到表格中每一行

　　 varrows=tab.rows;

　　 //便利所有的行,然后根据奇数偶数

　　 for(vari=1;i<rows.length;i++){

　　 varrow=rows[i];//得到其中的某一行

　　 if(i%2==0){

　　 row.bgColor="yellow";

　　 }else{

　　 row.bgColor="red"

　　 }

　　全选和全不选步骤分析:

　　 1.确定事件:onclick单机事件

　　 2.事件触发函数:checkAll()

　　 3.函数要去做一些事情:

　　获得当前第一个checkbox的状态

　　获得所有分类项的checkbox

　　修改每一个checkbox的状态

　　 functioncheckAll(){

　　// 获得当前第一个checkbox的状态

　　 varcheck1=document.getElementById("check1");

　　 //得到当前checked状态

　　 varchecked=check1.checked;

　　// 获得所有分类项的checkbox

　　// varchecks=document.getElementsByTagName("input");

　　 varchecks=document.getElementsByName("checkone");

　　// alert(checks.length);

　　 for(vari=0;i<checks.length;i++){

　　// 修改每一个checkbox的状态

　　 varcheckone=checks[i];

　　 checkone.checked=checked;

　　 }

　　 </script>

　　 </head>

　　 <bodyonload="init()">

　　 <tableborder="1px"width="600px"id="tab">

　　 <tr>

　　 <td>

　　 <inputtype="checkbox"onclick="checkAll()"id="check1"/>

　　 </td>

　　 </tr>

　　 <tr>

　　 <td>

　　 <inputtype="checkbox"name="checkone"/>

　　 </td>

　　 <td>黑马数码产品质量最好</td>

　　 <td>

　　 <ahref="#">修改</a>|<ahref="#">删除</a>

　　 </td>

　　 </tr>

　　 <tr>

　　 <td>

　　 <inputtype="checkbox"name="checkone"/>

　　 </td>

　　 <td>这里面的充气电动硅胶的</td>

　　 </tr>

　　 <tr>

　　 <td>

　　 <inputtype="checkbox"name="checkone"/>

　　 </td>

　　 <td>笔记本特卖</td>

　　 </tr>

　　 <tr>

　　 <td>

　　 <inputtype="checkbox"name="checkone"/>

　　 </td>

　　 </tr>

　　 <tr>

　　 <td>

　　 <inputtype="checkbox"name="checkone"/>

　　 </td>

　　 </tr>

　　 </table>

　　 </body>

　　</html>

　　JavaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么下面的语言也无法运行。而且由于每次重新加载都会重新解译，加载后，有些代码会延迟至运行时才解译，甚至会多次解译，所以速度较慢。