脚本实现checkbox的全选和反选
类别:Web前端 浏览量:587
时间:2013-8-23 脚本实现checkbox的全选和反选
脚本实现checkbox的全选和反选js实现全选和反选功能
1.页面
<html>
<head><title>导出excel</title><head>
<body>
<p style="text-align:center; padding-top:15px">
选择班级:
<select name="claId" id="claId" style="color:#999999">
<option value="0" style="color:#999999">==选择==</option>
<option value=1 style="color:#000000">药学1班</option>
<option value=2 style="color:#000000">药学2班</option>
</select>
</p>
<p></p>
<p style="text-align:center; padding-top:15px"> 选择需要导出的选项:</br>
<input type="checkbox" name="stu" id="a" value="考生学号">考生学号
<input type="checkbox" name="stu" id="a" value="考生姓名">考生姓名</br>
<input type="checkbox" name="stu" id="a" value="考生班级">考生班级
<input type="checkbox" name="stu" id="a" value="考生性别">考生性别</br>
<input type="checkbox" name="stu" id="a" value="考试得分">考试得分
<input type="checkbox" name="stu" id="a" value="测试时间">测试时间</br>
<input type="checkbox" name="stu" id="a" value="交卷时间">交卷时间
<input type="checkbox" name="stu" id="a" value="考试用时">考试用时</br>
</p>
<p style="text-align:center; padding-top:15px">
<input type="button" value="全选" onclick="allSelectType();"/>
<input type="button" value="反选" onclick="invertSelectType();"/>
</p>
</body>
</html>
2.相关的js代码
//反选
function invertSelectType()
{
//这里重写反选和全选方法,因为再次使用原先的会导致页面上的选项也会被选
var ids=$("input[name='stu']");
for(var i=0;i<ids.length;i++)
{
if(ids[i].checked==true)
{
ids[i].checked="";
}else{
ids[i].checked="checked";
}
}
}
//全选
function allSelectType()
{
var ids=$("input[name='stu']");
for(var i=0;i<ids.length;i++)
{
ids[i].checked="checked";
}
}
jquery实现全选和反选功能
1、页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>apsliyuan</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
</head>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
<br>
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选" />
<input type="button" name="checkall" id="checkallNo" value="全不选" />
<input type="button" name="checkall" id="check_revsern" value="反选" />
</body>
</html>
2、脚本的实现
$(document).ready(function(){
$("#checkall").click(function(){
$("input[name='items']").each(function(){
this.checked = true;
});
});
$("#checkallNo").click(function(){
$("input[name='items']").each(function(){
this.checked = false;
})
});
$("#check_revsern").click(function(){
$("input[name='items']").each(function(){
if (this.checked) {
this.checked = false;
}
else {
this.checked = true;
}
});
});
$("#checkItems").click(function(){
$("input[name='items']").each(function(){
if (this.checked) {
this.checked = false;
}
else {
this.checked = true;
}
});
});
您可能感兴趣
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- js原型链的理解(浅谈JS的原型和原型链)
- python提取json数据(Python爬取数据保存为Json格式的代码示例)
- jQuery多个版本间,以及与其他js文件冲突的解决方法
- mysqljson字段查询(Mysql 查询JSON结果的相关函数汇总)
- jsarray操作技巧(JS数组reduce你不得不知道的25个高级用法)
- 用javascript解析json(JavaScript JSON.stringify的使用总结)
- js 全局变量与局部变量
- js三级联动说明(基于JavaScript实现省市联动效果)
- js如何访问xml
- Json序列化对象的部分属性值
- JavaScriptSerializer对Json对象的序列化和反序列化
- js函数声明和函数表达式的区别
- extjs中Toolbar工具栏
- js数组去重复
- js数字时钟编程(JavaScript实现动态数字时钟)
- 对你思念入骨的女人,跟你见面时会有这几种表现,藏都藏不住(对你思念入骨的女人)
- 纳兰性德绝美作,一场重逢,成就最后一首称得上惊艳的《如梦令》(纳兰性德绝美作)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
热门推荐
- php数组写法(php文件操作之文件写入字符串、数组的方法分析)
- python初学篇元组(元组列表字典莫烦python基础)
- 聚集索引和非聚集索引的区别有哪些
- docker清理脚本(Docker 清理的常用方法及问题)
- java怎么调用支付宝的扫码支付(python实现银联支付和支付宝支付接入)
- nginx反向代理端口号(nginx 代理80端口转443端口的实现)
- python图文生成器(Python生成器的使用方法和示例代码)
- python怎样读取txt文件的数据内容(Python实现读取txt文件中的数据并绘制出图形操作示例)
- 宝塔linux面板php7.0安装不上(宝塔面板php.ini文件在哪里找)
- mysql新增字段并添加备注(mysql添加备注信息的实现)