这篇文章主要介绍了jquery实现全选、反选、获得所有选中的检验盒功能,对检验盒感兴趣的小伙伴们可以参考一下
举了七个不同的检验盒状态,和大家一一分享。
1、全选
$('#btn1 ').单击(函数(){
$('input[name='checkbox']').attr('checked ',' true ');
})
2、取消全选(全不选)
$('#btn2 ').单击(函数(){
$('input[name='checkbox']').删除属性(' checked ');
})
3、选中所有奇数
$('#btn3 ').单击(函数(){
$('input[name='checkbox']:odd ').attr('checked ',' true ');
})
4、选中所有偶数
$('#btn6 ').单击(函数(){
$('input[name='checkbox']:even ').attr('checked ',' true ');
})
5、反选
$('#btn4 ').单击(函数(){
$('input[name='checkbox']').each(function(){
如果($(这个)。属性('已检查'))
{
$(这个)。删除属性(' checked ');
}
其他
{
$(这个)。attr('checked ',' true ');
}
})
})
或者
$('#invert ').单击(函数(){
$(' # rule message[name=' delModuleID ']:checkbox)).每个(函数(I,o){
美元.属性('已检查',美元.attr(' checked ');
});
});
6、获取选择项的值
var aa=
$('#btn5 ').单击(函数(){
$(' input[name=' checkbox ']:checkbox:checked)).each(function(){
aa=$(这个)。瓦尔()
})
文档。写(aa);
})
})
7、遍历选中项
$(' input[type=checkbox][checked]').each(function(){
//由于复选框一般选中的是多个,所以可以循环输出
警报($(这个)。val());
});
下面实例讲述了jquery实现全选、反选、获得所有选中的复选框。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
html xmlns=' http://。w3。' org/1999/XHTML '
head runat='server '
标题无标题页/标题
脚本src=' js/jquery-1.6。量滴js ' type=' text/JavaScript '/script
脚本类型='文本/javascript '
jQuery(函数($){
//全选
$('#btn1 ').单击(函数(){
$('input[name='checkbox']').attr('checked ',' true ');
})
//取消全选
$('#btn2 ').单击(函数(){
$('input[name='checkbox']').删除属性(' checked ');
})
//选中所有基数
$('#btn3 ').单击(函数(){
$('input[name='checkbox']:even ').attr('checked ',' true ');
})
//选中所有偶数
$('#btn6 ').单击(函数(){
$('input[name='checkbox']:odd ').attr('checked ',' true ');
})
//反选
$('#btn4 ').单击(函数(){
$('input[name='checkbox']').each(function(){
如果($(这个)。属性('已检查'))
{
$(这个)。删除属性(' checked ');
}
其他
{
$(这个)。attr('checked ',' true ');
}
})
})
//或许选择项的值
var aa=
$('#btn5 ').单击(函数(){
$(' input[name=' checkbox ']:checkbox:checked)).each(function(){
aa=$(这个)。瓦尔()
})
文档。写(aa);
})
})
/脚本
/头
身体
表单id='form1' runat='server '
差异
输入类型='button' id='btn1' value='全选'
输入类型='button' id='btn2' value='取消全选'
输入类型='button' id='btn3' value='选中所有奇数'
输入类型='按钮id='btn6 '值='选中所有偶数'
输入类型='button' id='btn4' value='反选'
输入类型='button' id='btn5' value='获得选中的所有值'
英国铁路公司
输入类型='复选框'名称='复选框'值='复选框1 '
复选框一
输入类型='复选框'名称='复选框'值='复选框2 '
复选框2
输入类型='复选框'名称='复选框'值='复选框3 '
复选框3
输入类型='复选框'名称='复选框'值='复选框4 '
复选框四
输入类型='复选框'名称='复选框'值='复选框5 '
复选框5
输入类型='复选框'名称='复选框'值='复选框6 '
复选框6
输入类型='复选框'名称='复选框'值='复选框7 '
复选框七
输入类型='复选框'名称='复选框'值='复选框8 '
复选框8
/div
/表单
/body
/html
以上就是关于jquery中检验盒使用方法简单实例演示,希望对大家的学习有所帮助。
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。