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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 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微信支付之APP支付方法
2015/03/04 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jsp+javascript打造级连菜单的实例代码
2013/06/14 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
js实现时间日期校验
2020/05/26 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
Python页面加载的等待方式总结
2021/02/28 Python
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
留学经费担保书
2014/05/12 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
先进个人总结范文
2015/02/15 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
python3 hdf5文件 遍历代码
2021/05/19 Python
python全面解析接口返回数据
2022/02/12 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电