jquery操作checkbox的常用方法总结【附测试源码下载】
更新时间：2019年06月10日 11:09:59 作者：轻舞肥羊
这篇文章主要介绍了jquery操作checkbox的常用方法,结合完整实例形式总结分析了jQuery使用checkbox全选、取消、反选等常见操作技巧,并附带测试源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了jquery操作checkbox的常用方法。分享给大家供大家参考，具体如下：
做系统的过程中，与checkbox 复选框打交道，是难免的，而且在每个系统中，简直是必不可少的一道菜，通常的操作有一下几种：
1.用jquery 全部选择checkbox
2.用jquery 全部取消checkbox
3.用jquery 实现checkbox 反选
4.用jquery 获取所有已选择checkbox的值。
现在将这些常用的操作总结在一个例子中，方便以后查询,不愿意看代码的，也可以下载源码运行测试。
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>yihaomen.com jquery checkbox 测试</title>
<link rel="stylesheet" type="text/css" href="/static/css/global.css" rel="external nofollow" >
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
/*全选或全不选*/
$("#controlall").click(function() {
$('input[name="selectdivision"]').attr("checked",this.checked);
});
var $subBox = $("input[name='selectdivision']");
$subBox.click(function(){
$("#controlall").attr("checked",$subBox.length == $("input[name='selectdivision']:checked").length ? true : false);
});
/*反选*/
var reverseBtn=$('#reverseselect');
reverseBtn.click(function(){
$("[name='selectdivision']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
})
});
/*得到所有值*/
var getvalueBtn=$('#getValButton');
getvalueBtn.click(function(){
var val_array=[];
$("input:checkbox[name=selectdivision]:checked").each(function(){
val_array.push(parseInt($(this).val()));
});
alert(val_array.join());
});
});
</script>
</head>
<body>
<div>
<table style="border:1px dashed #ccc;margin-top:5px;" class="crmgrid_popwindow" id="division_table">
<tr style="background-color:#F9F9F9;">
<td><input type="checkbox" id="controlall" name="controlall" />全选/全不选</td>
<td>
<input type="button" id="reverseselect" value="反选" />
<input type="button" id="getValButton" value="得到选择的值" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="1"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="2"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="3"/></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="4"/></td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="5"/></td>
<td>5</td>
</tr>
<tr>
<td><input type="checkbox" name="selectdivision" value="6"/></td>
<td>6</td>
</tr>
</table>
</div>
</body>
</html>
源码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
本文着重介绍：JavaScript访问DOM对象方法/JQuery访问DOM对象方法,通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器，感兴趣的朋友可以了解下2013-01-01
本文给大家分享两种方法实现''推拉门''动画效果也可以称作是手风琴效果，具体实现方法大家通过本文一起学习吧2017-08-08
本篇文章主要介绍了jQuery时间验证和转换为标准格式的时间示例代码，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
在下面的集合中，你会发现很多便利的 jQuery 导航插件和有用的教程，帮助你实现充满吸引力的网站导航，让你网站更有组织性和交互性2012-09-09
本篇文章主要介绍了jQuery之动画效果，详细的介绍了各种动画特效的用法，有需要的可以了解一下。2016-11-11
经常我们玩微信都会用到查到附近的人，都是在app上实现手机摇一摇的功能。现在，我们将此技术搬移到手机web上，供大家学习，有需要的小伙伴可以参考下。2015-06-06
这里所说的浮动工具栏就是大家平时看到的社交网络分享按钮栏那样的效果,可以做成浮动效果且能上下移动,这里我们就来看一个使用jQuery制作页面工具边栏的实例分享.2016-05-05
这篇文章向大家推荐20款效果非常棒的 jQuery 插件。jQuery 是一个非常优秀的JavaScript库，它简化了 HTML 文档遍历，事件处理，动画以及 Ajax 交互，同时也改变了很多人编写 JavaScript 代码的方式2011-11-11
这篇文章主要介绍了jQuery文本框得到与失去焦点动态改变样式效果,涉及jQuery针对页面表单元素样式的动态操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了基于jquery实现轮播特效的相关资料，感兴趣的小伙伴们可以参考一下2016-04-04
最新评论