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 ...
随机推荐
- Python中的正斜杠与反斜杠
首先,"/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠一般来说对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠,但是现在Wi ...
- 【转】Nginx windows下搭建过程
Nginx windows下搭建过程 内容列表: 简要介绍 下载安装 配置测试 一.简要介绍 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器, ...
- android反编译工具 ApkDec-Release-0.1
(1 )使用帮助 1. 选择 all 全部编译内容包括jar .xml .及其他资源文件 2. 选择 jar 只反编译并打成jar 包 3. 反编译后你可以使用jd-gui.ex ...
- PHP and java
问题补充: 为什么不选用优秀的ASP.NET,京东做的不是很成功嘛?-----------------------------------------------------------------首 ...
- Qt中 QString 和int, char等的“相互”转换,关键是QString.toLocal8Bit().data();
Qt中 int ,float ,double转换为QString 有两种方法 1.使用 QString::number(); 如: long a = 63; QString s = QString:: ...
- 如何获取一个AlertDialog中的EditText中输入的内容
怎么获取一个AlertDialog中的EditText中输入的内容? new AlertDialog.Builder(this) .setTitle("请输入") .set ...
- 【HDOJ】1332 LC-Display
水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 11 #defin ...
- GF(2^8)乘法优化
利用指数表和对数表,实现GF(2^8)的乘法优化. 首先利用简单的基础的GF(2^8)乘法,构造指数表和对数表.在这里选取生成元3. 指数表exp[i] = 3^i,对数表log[i] = log3( ...
- Linux 系统下查看硬件信息命令大全
有许多命令可以用来查看 Linux 系统上的硬件信息.有些命令只能够打印出像 CPU 和内存这一特定的硬件组件信息,另外一些命令可以查看多种硬件组件的信息. 这个教程可以带大家快速了解一下查看各种硬件 ...
- activity theme parent 属性浅析
在AndroidManifest.xml文件中,可以对每一个Activity设置android:themetheme的设置 可以设置为系统自带的格式,也可以自定义格式. A: 系统自带格式 1.and ...