jquery中checkbox选择和全选

/**
* 全选事件
* @param idList 存储id的数组
* @param _this 对象
* @param label 存放ids的标签
*/
function selectAll(idList,_this,label){
var boxs = $("input.select-single");//所有商品记录
//被选中
if(_this.prop("checked")){
boxs.prop("checked",true);//复选框全部选中
boxs.each(function(){
if($.inArray($(this).val(),idList) < 0){//idList中不包含当前id值,则加入
idList.push($(this).val());
}
});
}else{
//全部取消
boxs.prop("checked",false);//复选框全部取消选中
//从idList数组中删除当前id
boxs.each(function(){
var index = $.inArray($(this).val(),idList);
if(index >= 0){//idList中包含当前id值,则删除
idList.splice(index,1);
}
});
}
$(label).val(idList.join(","));//将当前选中的商品主键写入隐藏域gid中
}

/***
* 单选事件
*/
function selectSingle(idList,_this,label){
if(_this.prop("checked")){//单选选中时
if($.inArray(_this.val(),idList) < 0){//idList中不包含当前id值,则加入
idList.push(_this.val());
}
if(_this.parents("#list-table").find(".select-single").length == _this.parents("#list-table").find(".select-single:checked").length){
//所有复选框都选中时,将全选复选框置为选中状态
_this.parents("#list-table").find(".select-all").prop("checked",true);
}
}else{//单选复选框取消选中时
//从idList数组中删除当前id
var index = $.inArray(_this.val(),idList);
if(index >= 0){//idList中包含当前id值,则删除
idList.splice(index,1);
}
_this.parents("#list-table").find(".select-all").prop("checked",false);
}
$(label).val(idList.join(","));//将当前选中的商品主键写入隐藏域id中
}

//全选事件
$(".select-all").click(function(){
var _this = $(this);
selectAll(idList,_this,".inner-section .list-title #ids");
});
//单选事件
$(".select-single").click(function(){
var _this = $(this);
selectSingle(idList,_this,".inner-section .list-title #ids");
});

时间: 2024-10-24 06:25:40

jquery中checkbox选择和全选的相关文章

关于列表中checkbox选中,全选/反选设置

关于列表中checkbox选中,全选设置 1 <html> 2 <head> 3 <script type="text/javascript"> 4 //点击行时,checkbox处理方法 5 function doclick(id){ 6 var allche = document.getElementById("allid");//全选checkbox 7 var che = document.getElementsByNam

【jQuery】CheckBox使用attr全选无法正确显示

今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").click(function(){ $('[name=items]:checkbox').attr('checked',

Jquery中的prop()方法 全选或全不选

注意: prop()在高版本才会有效, 低版本用attr(); $(function(){ // 元素checkbox var aChecked = $('.checkGoods'); // 全选 var oAllSelected = $('#checkAll'); oAllSelected.click(function() { var $this = $(this); if( $this.prop('checked') ) { aChecked.each(function() { $(this

20160113 JS中CheckBox如何控制全选

//判断CheckBoxzong他的点击事件 $("#CheckBoxzong").click(function () { //取出所有class为选中的集合 var query = $(".xuanzhong"); for (var i = 0; i < query.length; i++) { //把query里面所有的选择状态都变成this的选择状态 query.eq(i)[0].checked = this.checked; } })

jquery中checkbox全选失效的解决方法

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

Jquery 利用单个复选款(checkbox)实现全选、反选

1 <script type="text/javascript"> 2 $(function(){ 3 //全选 4 $("#CheckedAll").click(function(){ 5 $('[name=items]:checkbox').attr("checked", this.checked ); 6 }); 7 $('[name=items]:checkbox').click(function(){ 8 //定义一个临时变

jqury简易实现checkbox反选与全选

前段时间,一个同事让我帮忙写个全选与反选的功能,本来一段很简单的代码,突然卡顿,写了好几个小时,其实之前也做过类似的功能,只是一下子就懵逼了,简而言之还是自己对checkbox的反选与全选没有掌握十足,所以再利用一些时间重复巩固了这个小功能,代码不长,想到了就简单,没想到就折腾好久. 就自己遇到一些坑,关于checkbox细谈一二,今天只用jquery实现 下面是html代码 <p><label><input type="checkbox" class=&

2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中

字符串的另一种写法:<<<AAAA; 后两个AA回车要求定格  不然报错 例子: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <?php 9 $str = &

JQuery案例二:实现全选、全不选和反选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选和全不选以及反选</title> <script src="../js/jquery-1.8.3.js"></script> <script> $(function() { //全选事件 $("#checkedAll"