jquery checkbox的相关操作总结


Posted in Javascript onOctober 17, 2016

jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

1、全选

$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
})

2、取消全选(全不选)

$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
})

3、选中所有奇数

$("#btn3").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
})

4、选中所有偶数

$("#btn6").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
})

5、反选

$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
})

或者

$("#invert").click(function(){
    $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
      $(o).attr("checked",!$(o).attr("checked"));
    });
  });

 6、获取选择项的值

var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
})

7、遍历选中项

$("input[type=checkbox][checked]").each(function(){
 //由于复选框一般选中的是多个,所以可以循环输出 
 alert($(this).val()); 
});

 8、例子

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>无标题页</title> 
<script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
//全选 
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全选 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//选中所有基数 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//选中所有偶数 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 
//反选 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或许选择项的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="全选"> 
<input type="button" id="btn2" value="取消全选"> 
<input type="button" id="btn3" value="选中所有奇数"> 
<input type="button" id="btn6" value="选中所有偶数"> 
<input type="button" id="btn4" value="反选"> 
<input type="button" id="btn5" value="获得选中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</div> 
</form> 
</body> 
</html>

9、效果图

jquery checkbox的相关操作总结

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
javascript使用call调用微信API
Dec 15 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
js倒计时小实例(多次定时)
Dec 08 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
JS动态添加选项案例分析
Oct 17 #Javascript
Java  Spring 事务回滚详解
Oct 17 #Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 #Javascript
js浏览器html5表单验证
Oct 17 #Javascript
使用开源工具制作网页验证码的方法
Oct 17 #Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 #Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 #Javascript
You might like
PHP SPL使用方法和他的威力
2013/11/12 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
vue+iview+less 实现换肤功能
2018/08/17 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
python 排列组合之itertools
2013/03/20 Python
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
通过cmd进入python的步骤
2020/06/16 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
服装厂厂长岗位职责
2013/12/27 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
2015年班组工作总结
2015/04/20 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript