js初学—实现checkbox全选功能
布局如下:
<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全选功能的更多相关文章
- Form - CHECKBOX全选功能
FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...
- [置顶] 用mootools实现checkbox全选功能
全选时,所有的单个checkbox都要选中,反过来也可以实现 //全选按钮 $('chkall').addEvent('click',function(){ $$('input[name=" ...
- js 表格上checkbox 全选
<table class="layui-table"> <thead> <tr> <th width="75"> ...
- checkbox全选功能
$("#cb_classType_all").change(function () { if ($(this).is(":checked")) { $(&quo ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- jquery与js实现全选功能的区别---2017-05-12
一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...
- JS实现全选功能
000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...
- JS checkbox 全选 全不选
/* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
- C# winform中的datagridview控件标头加入checkbox,实现全选功能。
/// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...
随机推荐
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
- 在Winform中播放视频等【DotNet,C#】
在项目中遇到过这样的问题,就是如何在Winform中播放视频.当时考察了几种方式,第一种是直接使用Windows Media Player组件,这种最简单:第二种是利用DirectX直接在窗体或者控件 ...
- 9.29判断变量x是奇数还是偶数
方法一: package qqq; public class Jiou { public static void main(String[] args) { // TODO Auto-generate ...
- 【深入Java虚拟机】之一:Java内存模型与内存溢出
[深入Java虚拟机]之:Java内存区域与内存溢出 高速缓存模型如下: ----------------------------------------------------分割线-------- ...
- UNIX命令,统计当前目录(含子目录)下所有后缀为.log的文件中ERROR出现的行数
shell程序如下所示: # cat xarg.txt #! /usr/bin/ksh for logfile in `find . -name "*.log*"` do echo ...
- 使用redis作为session的存储方式
(1)准备 A. 安装好redis https://github.com/MSOpenTech/redis 注意:下载release版 启动脚本如下: redis-server redis.win ...
- matplotlib 基础
plt.figure(2) #创建图表2 plt.figure(1) #创建图表1 ax1=plt.subplot(211) # 在上面 最近的 图表1上 创建子图1 ax2=plt.subplot( ...
- Leetcode 264. Ugly Number II
Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...
- VS联调多个解决方案的项目
一.项目中经常出现一个解决方案里面有多个程序,如果想按F5启动多个实例进行操作调试那该怎么操作? 以前自己都使用附加进程的方法调试,这样的调试不需要按F5,自己只要运行多个程序后,使用vs的附加进程到 ...
- Linux下修改进程名称
catalog . 应用场景 . 通过Linux prctl修改进程名 . 通过修改进程argv[]修改进程名 . 通过bash exec命令修改一个进程的cmdline信息 1. 应用场景 . 标识 ...