JS+JSP checkBox 全选具体实现


Posted in Javascript onJanuary 02, 2014
<script> 
function func(){ 
var options=document.getElementsByName("chkBox"); 
for (var i=0;i<options.length;i++){ 
if(!options[i].disabled){ 
options[i].checked=true; 
} 
} 
} 
</script> 
<input type=checkbox name=chkBox value=1 disabled> 
<input type=checkbox name=chkBox value=1> 
<input type=checkbox name=chkBox value=1> 
<input type=checkbox name=chkBox value=1> 
<input type=button value="测 试" onclick="func()">

用javascript吧。
<html> 
<body> 
<script> 
function kk(){ 
var handleEl = document.getElementById("kkHandler"); 
var els = document.getElementsByName("kk"); 
for(i=0;i<els.length;i++){ 
els[i].checked = handleEl.checked; 
} } 
</script> 
<input type=checkbox onclick="kk()" name="kkHandler">全选<br> 
<input type=checkbox name="kk"> 
<input type=checkbox name="kk"> 
</body> 
</html>

2:
<form name="form" ID="Form1"> 
<input type="checkbox" name="id" value="" ID="Checkbox1">1 
<input type="checkbox" name="id" value="" ID="Checkbox2">2 
<input type="checkbox" name="chose" value="" onclick="selectAll()" ID="Checkbox5">allselect 
</form> 
<script> 
function selectAll() 
{ 
if(!document.form.id.length){ 
if(document.form.chose.checked){ 
document.form.id.checked=true; 
} 
else{ 
document.form.id.checked=false; 
} 
} 
else{ 
for(var i=0;i<document.form.id.length;i++){ 
if(document.form.chose.checked){ 
document.form.id[i].checked=true; 
} 
else{ 
document.form.id[i].checked=false; 
} 
} 
} 
} 
</script>

3:
<input type='checkbox' name='info' value='a'> 
<input type='checkbox' name='info' value='b'> 
<input type='checkbox' name='info' value='c'> 
<input type='checkbox' name='info' value='d'> 
<input type='checkbox' name='info' value='e'><br> 
<input type='button' value =' 全选 'onclick='check_all();'> 
<script> 
function check_all(){ 
arr = document.getElementsByName('info'); 
for(i=0;i<arr.length;i++){ 
arr[i].checked = true; 
} 
} 
</script>
Javascript 相关文章推荐
JS解密入门之凭直觉解
Jun 25 Javascript
Javascript 检测、添加、移除样式(className)函数代码
Sep 08 Javascript
JavaScript 函数式编程的原理
Oct 16 Javascript
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
May 23 Javascript
阻止表单提交按钮多次提交的完美解决方法
May 16 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
es6数值的扩展方法
Mar 11 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 #Javascript
js实现动态改变字体大小代码
Jan 02 #Javascript
js创建元素(节点)示例
Jan 02 #Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 #Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 #Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 #Javascript
JS脚本defer的作用示例介绍
Jan 02 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
分享几个超级震憾的图片特效
2012/01/08 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python 字典(dict)按键和值排序
2016/06/28 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python类的实例化问题解决
2019/08/31 Python
浅谈Python 参数与变量
2020/06/20 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
python如何设置静态变量
2020/09/07 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
单位单身证明范本
2014/01/11 职场文书
表演方阵解说词
2014/02/08 职场文书
情人节寄语大全
2014/04/11 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
面试通知短信
2015/04/20 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers