jQuery操作checkbox选择
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操作checkbox选择的更多相关文章
- jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）
原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...
- 解决jquery操作checkbox全选全不选无法勾选问题
最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...
- jQuery操作CheckBox的方法(选中,取消,取值)
jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...
- JQuery操作CheckBox 第二次无法选中的问题
用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. 百度后得知: 我使用的方法是 $( ...
- Jquery 操作CheckBox ，RadioButtonList，DropDownList
Jquery版本2.1.4 CheckBox 1.获取值: $("#chb").prop("checked"); RadioButtonList 1.获取值: ...
- 使用jquery 操作checkbox
checkbox 的全选与全不选以及获取选择的值. 效果: <!DOCTYPE html> <html lang="en"> <head> &l ...
- JQuery 操作 checkbox 二次赋值无效 attr ----> prop
CheckBox .attr('checked',false); Chrome和火狐第二次点击无效. 然后解决了把attr 改成了 prop 以后操作属性的时候各位记下,用prop 因为大家用的都是 ...
- jQUery操作checkbox
1 2 3 <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <s ...
- jQuery操作checkbox实例
示意图 <script type="text/javascript"> $(function () { $("#ddlNumber").change ...
随机推荐
- selenium python （十五）控制滚动条操作
#!/usr/bin/python# -*- coding: utf-8 -*-__author__ = 'zuoanvip' #一般用到操作滚动条的两个场景 #注册时的法律条文的阅读,判断用户 ...
- iOS学习笔记之Category
iOS学习笔记之Category 写在前面 Category是类别(也称为类目或范畴),使用Category,程序员可以为任何已有的类添加方法.使用类别可以对框架提供的类(无法获取源码,不能直接修改) ...
- Android学习之散乱的知识点
1. 安卓广告知名平台:有米,哇棒,架势,admob(国外,但效果不好)等,推荐用有米 2. src目录为源文件目录,所有可以被用户修改和创建的Java文件将被存放在这个目录下 3. xml中引用st ...
- SpringMVC + Spring + MyBatis 学习笔记：为MyBatis增加打印SQL功能 (最简化配置)
系统:WIN8.1 数据库:Oracle 11GR2 开发工具:MyEclipse 8.6 框架:Spring3.2.9.SpringMVC3.2.9.MyBatis3.2.8 1.以下jar包拷贝到 ...
- Scrum概述
• 敏捷方法是一类软件开发流程的泛称: • 敏捷方法是相对于传统的瀑布式软件过程提出的: • 敏捷方法可以用敏捷宣言(4条).敏捷原则(12条)来概括: • 敏捷原则通过一系列的敏捷实践来体现出来: ...
- PHP正则表达式匹配中文字符
网上有很多类似的文章,但往往都不能用 所以记录一下 preg_match_all("/([\x{4e00}-\x{9fa5}])/u", $input, $match); 注意:限 ...
- URAL-1998 The old Padawan 二分
题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1998 题意:有n个石头,每个石头有个重量,每个时间点你能让一个石头飞起来,但有m个时间点 ...
- Java中的BASE64
located in rt.jar... public class sun.misc.BASE64Encoder extends sun.misc.CharacterEncoder{ //.. } p ...
- sql server对并发的处理-乐观锁和悲观锁【粘】
假如两个线程同时修改数据库同一条记录,就会导致后一条记录覆盖前一条,从而引发一些问题. 例如: 一个售票系统有一个余票数,客户端每调用一次出票方法,余票数就减一. 情景: 总共300张票,假设两个售票 ...
- poj 3134 Power Calculus(IDA*)
题目大意: 用最小的步数算出 x^n 思路: 直接枚举有限步数可以出现的所有情况. 然后加一个A* 就是如果这个数一直平方 所需要的步骤数都不能达到最优 就剪掉 #include < ...