jQuery操作checkbox
2015-10-23 14:43
337 查看
全选和全部选
<!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>
相关文章推荐
- jQuery 获取 div 之间的内容,有两种方法
- 依次弹出和收回的右侧菜单jquery代码实现
- 今天发现一个非常方便的jquery API查询网址
- jquery实现动态添加附件
- 人人必知的10个jQuery小技巧
- jQuery旋转插件—rotate
- jquery.rotate插件实现转盘抽奖示例
- jQuery验证控件jquery.validate.js使用说明+中文API
- jQuery技术交流资料
- jquery 跨域获取网页数据
- 通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
- jQuery的一些简单语法总结
- jQuery 实现图片切换
- jQuery实现分章节锚点“回到顶部”动画特效代码
- 解决 jquery.form.js和springMVC上传 MultipartFile取不到信息
- JQuery中$.ajax()方法参数详解
- 一步一步jQuery流程设计器插件goflow(附代码) - 3 - 添加流程结点
- 深入理解jQuery.css和jQuery.style源码
- PHP+JQUERY+AJAX上传、裁剪图片(2)
- jQuery(function(){ }) 和 (function($) {…})(jQuery) 区别