布局如下:

<p ><input type="checkbox" id="che1"/>全选</p>
<div id="div1">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>

javascript如下:

<script type="text/javascript">
window.onload=function()
{
xuanzhe();
}
function xuanzhe()//定义函数
{
var oChe1=document.getElementById('che1');//获取che1
var oDiv1=document.getElementById('div1').getElementsByTagName('input');//获取div里面的所有input oChe1.onclick=function()//定义che1的鼠标点击事件
{ for(var i=0;i<oDiv1.length;i++)
{
if(che1.checked==true)
{
oDiv1[i].checked=true;
}
else
{
oDiv1[i].checked=false;
}
} };
} </script>

能实现checkbox全选功能!  这种功能在网页是应用很广泛!

js初学—实现checkbox全选功能的更多相关文章

  1. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  2. [置顶] 用mootools实现checkbox全选功能

    全选时,所有的单个checkbox都要选中,反过来也可以实现 //全选按钮 $('chkall').addEvent('click',function(){ $$('input[name=" ...

  3. js 表格上checkbox 全选

    <table class="layui-table"> <thead> <tr> <th width="75"> ...

  4. checkbox全选功能

    $("#cb_classType_all").change(function () { if ($(this).is(":checked")) { $(&quo ...

  5. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  6. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  7. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  8. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  9. C# winform中的datagridview控件标头加入checkbox,实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

随机推荐

  1. ecshop 签名

    先从index.php主页开始 页面关键字 {$keywords } 页面标题 {$page_title} 产品分类 父分类列表 {foreach from=$categories item=cat ...

  2. linux基础-第十二单元 硬盘分区、格式化及文件系统的管理一

    第十二单元 硬盘分区.格式化及文件系统的管理一 硬件设备与文件名的对应关系 硬盘的结构及硬盘分区 为什么进行硬盘分区 硬盘的逻辑结构 Linux系统中硬盘的分区 硬盘分区的分类 分区数量的约束 使用f ...

  3. js实现倒计时效果

    <!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...

  4. js中如何去获取外部css样式

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 本机ubuntu链接阿里云服务器(也是ubuntu)

    首先在本机安装ssh工具,并修改配置文件(参考:http://www.cnblogs.com/herd/p/5009067.html) 第一步:ssh 100.121.156.32(即:服务器的ip地 ...

  6. php实现木桶排序

    今天重新看了看木桶排序,思路比较简单,这里整理一下,免得下次忘记. 假设要对一组数据 2 2 3 1 6 5 4 进行桶排序. 1.首先选出最小元素1和最大元素6,做一个桶,也就是定义一个1-6的数组 ...

  7. js-格式化数字保留两位小数-带千分符

    很多时候发现有时候js会提示自带函数不能使用,所以自己找了很多资料实现了个 html <input type="text" class="input_text in ...

  8. Ext-ajax请求数据

    Ext.Ajax.request({ url: webPath+'/news/newsEastmoneyList', method: 'POST', success: function (respon ...

  9. 【凯子哥带你学Framework】Activity界面显示全解析

    前几天凯子哥写的Framework层的解析文章<Activity启动过程全解析>,反响还不错,这说明“写让大家都能看懂的Framework解析文章”的思想是基本正确的. 我个人觉得,深入分 ...

  10. JAVA判断各种类型数据是否为空

    1.判断list是否为空(Map.Set同list) if(list != null && list.size() == 0){ } if(list != null && ...