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>复选框应 ...
随机推荐
- 对DataSet,DataRow,DateTable转换成相应的模型
/// <summary> /// DataRow 转成 模型 /// </summary> /// <t ...
- php 冒泡法 排序
<?php /** * php 冒泡法 * @param $arr * @param string $order 排序符 * @return $arr */ function orderarr( ...
- Zookeeper -- 本地\完全分布式 搭建
准备工作 linux软件:Zookeeper-3.4.12.tar.gz 四台centos系统虚拟机,主机名为:s101~s104 一.本地模式搭建(s101上安装) 1.解压软件压缩包:解压到根目录 ...
- Django时间时区问题
在django1.4以后,存在两个概念 naive time 与 active time. 简单点讲,naive time就是不带时区的时间,Active time就是带时区的时间. 举例来说,使用d ...
- Python 爬虫 七夕福利
祝大家七夕愉快 妹子图 import requests from lxml import etree import os def headers(refere):#图片的下载可能和头部的referer ...
- 企业SVN版本管理与代码上线方案
1.SVN服务实战 1) 什么是SVN(Subversion)? Svn(subversion)是近年来崛起的非常优秀的版本管理工具,与CVS管理工具一样,SVN是一个跨平台的开源的版本控制系统.Sv ...
- golang 兼容不同json结构体解析实践
线上服务器,同一个web接口有时需要兼容不同版本的结构体.这种情况思路是使用interface{}接收任意类型数据,结合reflect包处理. 如下,http接口调用者会传入不同的json结构数据(单 ...
- Java 高级应用编程 第一章 工具类
一.Java API Java API简介 1.API (Application Programming Interface) 应用程序接口 2.Java中的API,就是JDK提供的各种功能的Java ...
- 南京Uber优步司机奖励政策（7.20~7.26）
人民优步奖励前提 *必须满足当周平均评分4.5星及以上,且当周接单率70%及以上,满足以上所有前提即可获得当周奖励 *刷单和红线行为立即封号并取消当周全部奖励及车费! 滴滴快车单单2.5倍,注册地 ...
- IOI 2017 Practice Contest mountains
Mountains 题面 题意: 选最多的点使得两两看不见. 分析: 分治,solve(l,r)为区间[l,r]的答案.那么如果不选最高点,分治两边即可,选了最高点,那么在最高点看不见的区间里分治. ...