欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

jquery的全选和多选操作

发布时间:2024/7/5 编程问答 0 豆豆
如意编程网 收集整理的这篇文章主要介绍了 jquery的全选和多选操作 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

//全选产品
$('#checkAll').click(function() {
$(this).prop('checked',!$(this).prop('checked'));
if($(this).prop('checked')) {
$(this).prop('checked',false);
$('#getProduct input').each(function(index,item) {
$(item).prop('checked',false)
})
}else {
$(this).prop('checked',true);
$('#getProduct input').each(function(index,item) {
$(item).prop('checked',true)
});
};
});

//二分查找
function binarySearch(arr,target) {
var l = 0,r = arr.length-1;
while(l <= r) {
var mid = (l+r)/2;
if(arr[mid] == target) {
return mid
}else if(arr[mid] < target) {
l = mid+1
}else {
r = mid-1
}
};
return -1;
}
//多选产品
$('#getProduct input').each(function(index,item) {
$(item).click(function() {
var count = 0;
if (!$(this).prop("checked")) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
};
$('#getProduct input').each(function(index,item) {
if($(item).prop('checked')) {
count ++;
}else {
count --;
};
});
if(count == $('#getProduct input').length) {
$('#checkAll').prop('checked',true)
}else {
$('#checkAll').prop('checked',false)
};
})
})

其中#checkAll是全选按钮的id,#getProduct input是tbody中的所有类型为checkbox的input。

转载于:https://www.cnblogs.com/shenwh/p/10330624.html

总结

以上是如意编程网为你收集整理的jquery的全选和多选操作的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。