jquery实现复选框全选反选
实现原理:
给所有的复选框取相同的名字,当点击全选的时候把chenked属性全部设置为true;当点击全不选的时候把checked属性设置为false;
源代码如下:
html代码:
<form method="post" action="">
你的爱好是:<input type="checkbox" id="CheckedAll" />全选/全不选
<br />
<input type="checkbox" name="one" value="唱歌" />唱歌
<input type="checkbox" name="one" value="跳舞" />跳舞
<input type="checkbox" name="one" value="看书" />看书
<input type="checkbox" name="one" value="运动" />运动
<br />
<input type="button" id="send" value="提交" />
</form>
js代码:
<script type="text/javascript">
$(document).ready(function(){
$("#CheckedAll").click(function(){
if (this.checked){
$("[name=one]:checkbox").attr("checked",true);
}else{
$("[name=one]:checkbox").attr("checked",false);
}
/* $("[name=checkboxt]:checkbox").attr("checked",this.checked);*/
});
$("#send").click(function(){
var str ="你的爱好是:\r\n";
$("[name=one]:checkbox:checked").each(function(){
str+=$(this).val()+"\r\n";
});
alert(str);
});
});
</script>
jquery实现复选框全选反选的更多相关文章
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jQuery 实现复选框全选、反选及获取选中的值
实现复选框全选,反选及获取选中的值: 代码如下: <!doctype html> <html lang="en"> <head> <met ...
- 复选框全选、全不选和反选的效果实现VIEW:1592
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- jQuery中的几个案例:隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
- vue+vant-UI框架写的购物车的复选框全选和反选
购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(ite ...
随机推荐
- swift和 oc 混编2-备
在Swift语言出现之前,开发iOS或OS X应用主要使用Objective-C语言,此外还可以使用C和C++语言,但是UI部分只能使用Objective-C语言. 选择语言 Swift语言出现后,苹 ...
- js new Date().Format
/** * * 对Date的扩展,将 Date 转化为指定格式的String * 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符 * 年(y)可以用 1-4 ...
- Ubuntu 下启动/停止/重启mysql服务
1:sudo start mysql 2:sudo stop mysql 3:sudo restart mysql
- nodejs 记入
1. vs2015 使用最新的 nodejs refer : http://josharepoint.com/2016/05/04/how-to-configure-visual-studio-201 ...
- 一道考验你设计能力的C++编程题
http://www.cppblog.com/weiym/archive/2012/06/12/178472.html
- COJ 0359 xjr考考你数据结构(根号2)线段树区间增加
xjr考考你数据结构(根号2) 难度级别:C: 运行时间限制:3000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 请你编写一个数据结构,完成以下功能: 1)求出第 ...
- JQ无法修改input的type属性的替代解决方法
需要实现的效果:一个输入框,当输入框未获得焦点的时候,显示为 “请输入密码”:当输入内容并失去焦点的时候,输入内容显示为”*****”,如果没有输入仍然显示“请输入密码”: 方法一:使用text,隐藏 ...
- HDOJ 1194 Beat the Spread!(简单题)
Problem Description Superbowl Sunday is nearly here. In order to pass the time waiting for the half- ...
- Linux中断分层技术
一.中断嵌套 当系统正在执行某中断处理函数时,又产生了一个新的中断,这就叫做中断嵌套.当中断为慢速中断时,新的中断会取代当前中断,即当前中断没有执行完就结束 了:当中断为快速中断时,新的终端就不会产 ...
- 高性能Web服务器Nginx及相关新技术的应用实践-张宴
http://files.cnblogs.com/files/niaowo/%E9%AB%98%E6%80%A7%E8%83%BDWeb%E6%9C%8D%E5%8A%A1%E5%99%A8Nginx ...