jquery实现全选、反选、获得所有选中的checkbox
2015-12-01 00:00
1116 查看
举了7个不同的checkbox状态,和大家一一分享。
1、全选
2、取消全选(全不选)
3、选中所有奇数
4、选中所有偶数
5、反选
或者
6、获取选择项的值
7、遍历选中项
下面实例讲述了jquery实现全选、反选、获得所有选中的checkbox。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
以上就是关于jquery中checkbox使用方法简单实例演示,希望对大家的学习有所帮助。
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
jQuery实现回车键(Enter)切换文本框焦点的代码实例
jQuery实现当按下回车键时绑定点击事件
基于Jquery的实现回车键Enter切换焦点
JQuery操作textarea,input,select,checkbox方法
jquery获取多个checkbox的值异步提交给php的方法
jquery的ajax异步请求接收返回json数据实例
Jquery异步请求数据实例代码
jquery捕捉回车键及获取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()); });
下面实例讲述了jquery实现全选、反选、获得所有选中的checkbox。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
<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>
以上就是关于jquery中checkbox使用方法简单实例演示,希望对大家的学习有所帮助。
您可能感兴趣的文章:
Jquery响应回车键直接提交表单操作代码jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
jQuery实现回车键(Enter)切换文本框焦点的代码实例
jQuery实现当按下回车键时绑定点击事件
基于Jquery的实现回车键Enter切换焦点
JQuery操作textarea,input,select,checkbox方法
jquery获取多个checkbox的值异步提交给php的方法
jquery的ajax异步请求接收返回json数据实例
Jquery异步请求数据实例代码
jquery捕捉回车键及获取checkbox值与异步请求的方法
相关文章推荐
- 基于jQuery实现的双11天猫拆红包抽奖效果
- ajax基于jquery
- jQuery实现的全选、反选和不选功能
- PHP,Jquery,Ajax,$.(get)
- Jquery EasyUI环境搭建以及简单使用
- jquery-easyui简单使用
- jQuery获取this当前对象子元素对象
- jQuery获取this当前对象子元素对象
- jQuery获取this当前对象子元素对象
- jQuery冒泡事件
- jQuery美女幻灯相册轮播源代码
- jQuery_ajax实现检查用户名是否已注册
- jQuery事件绑定,解绑,自定义事件
- jQuery事件
- js,jquery,css,html5特效
- jQuery-File-Upload 使用笔记(一) 基础插件配置
- jquery操作dom
- Eclipse去除jquery引入错误
- jquery选择器
- jquery attr和prop区别 attr选中checkbox不起作用