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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
Ajax基础知识详解
Feb 17 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
使用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 $_ENV为空的原因分析
2009/06/01 PHP
php数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
JavaScript 创建对象
2009/07/17 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
基于node实现websocket协议
2016/04/25 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
es6基础学习之解构赋值
2018/12/10 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
python操作oracle的完整教程分享
2018/01/30 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Django 用户认证组件使用详解
2019/07/23 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
新浪网技术部笔试题
2016/08/26 面试题
this关键字的作用
2016/01/30 面试题
一个大学生十年的职业规划
2014/01/17 职场文书
网站创业计划书
2014/04/30 职场文书
毕业生应聘求职信
2014/07/10 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫