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 ...
随机推荐
- java list随机打乱
java list随机打乱package arrlist; import java.util.ArrayList; import java.util.Collections; import java. ...
- import random 模块导入
import random print(random.random()) #浮点数值 print(random.randint(1,2))#循环显示1,2 print(random.randrange ...
- svn 的备份还原
备份脚本如下: #!/bin/bash ############################################################################### ...
- Java设计模式(七) 模板模式
[模板模式]在一个方法中定义了一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 1,定义模板类 package com.pattern ...
- Kernel Methods (2) Kernel function
几个重要的问题 现在已经知道了kernel function的定义, 以及使用kernel后可以将非线性问题转换成一个线性问题. 在使用kernel 方法时, 如果稍微思考一下的话, 就会遇到以下几个 ...
- npm安装完bower,使用时提示bower不是内部或外部命令
归根结底还是环境变量的问题,但是配了好几次没配成功,最后就直接把装好的node里面的复制到系统创建的环境变量目录下,问题解决! 问题描述:我们安装node.js,npm,通过npm安装bower一路正 ...
- 使用iframe 或frameset框架退出不成功
iframe .frameset框架有时登录界面加载在框架当中,但我们想直接到登录界面,这时我们可以使用js来实现.if(window!=top) { top.location.href=locati ...
- css 数字出现滚动条解决
<div style="height:100px;overflow-y:auto;word-wrap:break-word;word-break:break-all;" ng ...
- choorme 升级到最新版 adobe flash提示过期解决方案
进入adobe flash 官网,下载最新版的adobe flash http://labs.adobe.com/downloads/flashplayer.html
- poj1279 半平面交
题意:没看懂= = sol:在纸上随便画两下就可以看出,答案即按逆时针方向建立line,求它们的半平面交的面积. 模板题.注意输出答案时输出ans+eps,否则可能会出现结果为-0.00的情况. #i ...