Jquery复选框

1、checkbox list选择

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 全选
$("#btnCheckAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", true);
}); // 全不选
$("#btnCheckNone").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", false);
}); // 反选
$("#btnCheckReverse").bind("click", function () {
$("[name = chkItem]:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
}); // 全不选
$("#btnSubmit").bind("click", function () {
var result = new Array();
$("[name = chkItem]:checkbox").each(function () {
if ($(this).is(":checked")) {
result.push($(this).attr("value"));
}
}); alert(result.join(","));
});
});
</script>
</head>
<body>
<div>
<input name="chkItem" type="checkbox" value="今日话题" />今日话题
<input name="chkItem" type="checkbox" value="视觉焦点" />视觉焦点
<input name="chkItem" type="checkbox" value="财经" />财经
<input name="chkItem" type="checkbox" value="汽车" />汽车
<input name="chkItem" type="checkbox" value="科技" />科技
<input name="chkItem" type="checkbox" value="房产" />房产
<input name="chkItem" type="checkbox" value="旅游" />旅游
</div>
<div>
<input id="btnCheckAll" type="button" value="全选" />
<input id="btnCheckNone" type="button" value="全不选" />
<input id="btnCheckReverse" type="button" value="反选" />
<input id="btnSubmit" type="button" value="提交" />
</div>
</body>
</html>

2、checkbox table选中

效果图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
table
{
border-collapse: collapse;
}
td
{
border: 1px solid #ccc;
}
</style>
<script src="Scripts/jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// chkAll全选事件
$("#chkAll").bind("click", function () {
$("[name = chkItem]:checkbox").attr("checked", this.checked);
}); // chkItem事件
$("[name = chkItem]:checkbox").bind("click", function () {
var $chk = $("[name = chkItem]:checkbox");
$("#chkAll").attr("checked", $chk.length == $chk.filter(":checked").length);
})
});
</script>
</head>
<body>
<table id="tb">
<thead>
<tr>
<td>
<input id="chkAll" type="checkbox" />
</td>
<td>
分类名称
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="chkItem" type="checkbox" value="今日话题" />
</td>
<td>
今日话题
</td>
</tr>
<tr>
<td>
<input name="chkItem" type="checkbox" value="视觉焦点" />
</td>
<td>
视觉焦点
</td>
</tr>
<tr>
<td>
<input name="chkItem" type="checkbox" value="财经" />
</td>
<td>
财经
</td>
</tr>
<tr>
<td>
<input name="chkItem" type="checkbox" value="汽车" />
</td>
<td>
汽车
</td>
</tr>
<tr>
<td>
<input name="chkItem" type="checkbox" value="科技" />
</td>
<td>
科技
</td>
</tr>
<tr>
<td>
<input name="chkItem" type="checkbox" value="房产" />
</td>
<td>
房产
</td>
</tr>
<tr>
<td>
<input name="chkItem" type="checkbox" value="旅游" />
</td>
<td>
旅游
</td>
</tr>
</tbody>
</table>
</body>
</html>

Jquery复选框的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. Thymeleaf+layui+jquery复选框回显

    一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...

  3. jquery 复选框

    jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. Jquery复选框的全选全不选及选择所有复选框实现全选的复选框

    Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...

  6. jQuery 复选框全选反选

    <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click( ...

  7. springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  8. jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换

    1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...

  9. jQuery——复选框操作

    学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...

随机推荐

  1. Swift_枚举

    Swift_枚举 点击查看源码 空枚举 //空枚举 enum SomeEnumeration { // enumeration definition goes here } 枚举基本类型 //枚举基本 ...

  2. 内网最小化安装CentOS后,想安装ISO文件中的包怎么办呢?

    昨日公司测试人员需要升级公司服务器Python,发现公司服务器上缺失了各种各样的包.比如open-ssl,python-deve等 1.查看你的Centos版本 lsb_release -a 2.上传 ...

  3. 可以提高php编程效率的20个要点

    整理了可以提高php编程效率的20个要点,发博客记录一下,需要的朋友可以参考.    1.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 2.$row['id' ...

  4. PHP获取当月天数,获取当月的每天的开始和结束的时间戳,获取当月每号

    由于经常要写导单和数据分析功能,所以要获取什么时间的数据,想什么当天,周,年,月之类的时间格式都很好获取.我今天在这里为大家提供的是当月每天的开始和结束的时间格式. 希望能帮到大家!!! # 获取当月 ...

  5. 对Python语法简洁的贴切描述

    很多人认为,Python与其他语言相比,具有语法简洁的特点.但这种简洁到底体现在哪些地方,很少有人能说清楚.今天看到一个对这一问题的描述,个人觉得很不错,原文如下: “Python语法主要用来精确表达 ...

  6. [转]Visual C++ 和 C++ 有什么区别?

    注:本篇内容转载与网络,方便自己学习,如有侵权请您联系我删除,谢谢. 有位同学问我“Visual C++和C++有什么区别?”,这的确是初学者会感到困惑的问题,比较常见.除此之外,还有“先学C++好, ...

  7. Redis 常用数据结构命令

    1. 字符串(string) 增加元素 set key value [EX seconds] [PX milliseconds] [NX|XX] EX seconds:为键设置秒级过期时间 PX mi ...

  8. 深入解析Dropout

    过拟合是深度神经网(DNN)中的一个常见问题:模型只学会在训练集上分类,这些年提出的许多过拟合问题的解决方案:其中dropout具有简单性并取得良好的结果: Dropout 上图为Dropout的可视 ...

  9. java 程序文本文档形式的编写,编译,及运行

    一.程序的编写 1.在指定路径下新建文本文档 如在f盘新建了一个名为demo的文件夹,在该文件夹路径下新建了一个文本文档 2.打开文本文档,进行编写,例如: 3.保存 选择文件另存为,文件名称为你创建 ...

  10. 【NIS】深入了解NIS

    1  简介 NIS( NetworkInformation Service)提供了一个网络黄页的功能,当用户登录系统时,Linux系统会到NIS主机上去寻找用户使用的帐号密码信息加以比对,以提供用户登 ...