Jquery 组 checkbox全选按钮
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<form action="">
<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 id="CheckedAll" type="button" name="items" value="全选"/>
<input id="CheckedNo" type="button" name="items" value="全不选"/>
<input id="CheckedRev" type="button" name="items" value="反选"/>
<input id="send" type="button" name="items" value="提交"/>
</form>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
//用原生js不会有问题
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=true;
});
});
$("#CheckedNo").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=false;
});
});
$("#CheckedRev").click(function(){
$('[name=items]:checkbox').each(function(){
this.checked=!this.checked;
});
});
$("#send").click(function(){
var str="你选中的是: \r\n";
$('[name=items]:checkbox').each(function(){
// 用this.checked或者用$(this).context.checked,用attr不行
if(this.checked){
str+=$(this).val()+"\r\n";
}
});
console.log(str);
})
</script>
</html>
Jquery 组 checkbox全选按钮的更多相关文章
- Jquery 组 checkbox全选checkbox
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...
- jQuery实现CheckBox全选、全不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery设置checkbox全选(区别jQuery版本)
jQuery设置checkbox全选在网上有各种文章介绍,但是为什么在我们用他们的代码的时候就没有效果呢? 如果你的代码一点错误都没有,先不要急着怀疑人家代码的正确性,也许只是人家跟你用的jQuery ...
- jquery中checkbox全选失效的解决方法
这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...
- Jquery小例子:全选按钮、加事件、挂事件;parent()语法;slideToggle()语法;animate()语法;元素的淡入淡出效果:fadeIn() 、fadeOut()、fadeToggle() 、fadeTo();function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jQuery给CheckBox全选与不全选
$(function(){ $("#checkAll").click(function() {//全选 $('input[name="DATA"]').prop ...
- jQuery实现checkbox全选反选及删除等操作
1.list.html 说明:用checkbox数组Check[]存放每一行的ID值 <div id="con"> <table width="100% ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
随机推荐
- kubernetes环境搭建
两台服务器 centos-master 172.16.120.189 centos-minion 172.16.120.190 master上运行etcd, kube-apiserver, kub ...
- Omi框架学习之旅 - 生命周期 及原理说明
生命周期 name avatars company constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完 ...
- VS2017上执行VS2013项目错误MSB802之解决方案
进行想把我编写的数字图像处理软件MagicHouse更新到最新的VS2017开发环境下,原来的开发环境是VS2013.但是用VS2017打开项目并编译时,系统报错误MSB802,如下图所示. 其实Vi ...
- Linux系列教程(四)——Linux常用命令之文件和目录处理命令
这个系列教程的前面我们讲解了如何安装Linux系统,以及学习Linux系统的一些方法.那么从这篇博客开始,我们就正式进入Linux命令的学习.学习命令,首先要跟大家纠正的一点就是,我们不需要记住每一条 ...
- webpackt入门1:webpack介绍&webpack安装&使用webpack打包
本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...
- echarts 响应式布局
<body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: ...
- Elasticsearch 系列文章汇总(持续更新...)
系列文章列表 Query DSL Query DSL 概要,MatchAllQuery,全文查询简述 Match Query Match Phrase Query 和 Match Phrase Pre ...
- c++对象模型-对象模型
1:简单对象模型 1>介绍:每个成员都使用一个指针指向真正的成员.所以对象 的大小很好确定,就是成员数*指针大小. 2>用途:成员函数就是使用这个模型的 3>图: 4>加上继承 ...
- RabbitMQ在特来电的深度应用
特来电是一个互联网公司,而且是技术领先的互联网公司.互联网公司的标配是什么?答案就是缓存+MQ.没错,您没看错,就是MQ--消息队列,我们今天要讨论的RabbitMQ就是消息队列中功能非常强大的一种. ...
- 将 C# 枚举序列化为 JSON 字符串 基础理论
该转换过程需要引用 Newtonsoft.JSON,这其中的转换过程还是蛮有意思的. 一.定义枚举 /// <summary> /// 托寄物品枚举 /// </summary> ...