Jquery复选框
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复选框的更多相关文章
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Thymeleaf+layui+jquery复选框回显
一.Thymeleaf+layui+jquery复选框回显 基于Thymeleaf模板下的layui+jquery复选框回显,主要是jquery.大致意思是:把数组转成JSON传到前台,再在前台转回数 ...
- jquery 复选框
jquery 选中复选框 $("input[type='checkbox']").prop("checked", true); jquery 判断复选框是否被选 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- Jquery复选框的全选全不选及选择所有复选框实现全选的复选框
Jquery代码 $(function () { $(":checkbox.parentfunc").click(function () { //如何获取被点击的那个复选框 $(t ...
- jQuery 复选框全选反选
<script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click( ...
- springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
1.要选中的复选框设置统一的name 用prop() prop() 方法设置或返回被选元素的属性和值. $("#selectAll").click(function(){ $(&q ...
- jQuery——复选框操作
学习jQuer对表单.表格操作的过程中,按照书上的例子发现一个问题: <!DOCTYPE html> <html> <head> <title>复选框应 ...
随机推荐
- List、LinkedList、ArrayList、Vector
目前好像写不出比较高质量的随笔,除了多看看别人写的,就是多写,做好自己可以做的 最近听的和看到的最多的一个词就是“勿忘初心”.的确不少人到了一定高度之后,就不知道该怎么做了.(包括我曾经的偶像娜姐,在 ...
- java读取xml文件的四种方法
Xml代码 <?xml version="1.0" encoding="GB2312"?> <RESULT> <VALUE> ...
- 10.安装使用jenkins及其插件
持续集成 1.安装jenkins 安装依赖 [root@git ~]# yum install java-1.8.0-openjdk java-1.8.0-openjdk-devel rpm包下载: ...
- js实现99乘法表的编写（双层for循环与递归方法）
双层for循环实现方法: function nine (num) { ; i <= num; i++){ var str = ''; ; k <= num; k++){ if(i > ...
- PHP二维码生成
原文链接:http://www.qqdeveloper.com/detail/14/1.html 代码下载地址:链接:http://pan.baidu.com/s/1dFgqiaP 密码:lex5 材 ...
- 集合之TreeMap
TreeMap 底层数据结构是二叉树 如何保证键的唯一: 利用存的特点 如何保证键的可排序: 利用取的特点 左跟右 在map中数据结构只对键有效TreeMap 有Map的键值对的特性:还可以进行排序, ...
- opencv移植（二）
原文:https://blog.csdn.net/Guet_Kite/article/details/78667175?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接 ...
- openssl windows平台编译库
首先感谢http://blog.csdn.net/YAOJINGKAO/article/details/53041165?locationNum=10&fps=1和https://www.cn ...
- Python递归与迭代
1.递归与迭代: 递归和迭代都是循环的一种.简单地说,递归是重复调用函数自身实现循环.迭代是函数内某段代码实现循环,而迭代与普通循环的区别是:循环代码中参与运算的变量同时是保存结果的变量,当前保存的结 ...
- HyperLedger Fabric 1.4 问题汇总（16）
16.1 在运行e2e_cli例子时,执行./network_setup.sh up,出现错误:网络搭建之network e2ecli_default not found 问题原因: End-2-En ...