Jquery实现账单全部选中和部分选中管理
Posted 适AT
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery实现账单全部选中和部分选中管理相关的知识,希望对你有一定的参考价值。
在做购物车系统是我们往往会遇到这样一个需求,在点击全选框时我们要将全部的单个账单都选中;在单个选中账单时,如果账单全部被选中则需要全选框处于选中状态,若没有全部被选中则全选框处于没选中状态;
以下是在学习过程的实现代码:
<script type="text/javascript">
$(document).ready(function(){
//删除当前行商品元素
// $(".del").click(function () {
// $(this).parent().parent().remove();
// });
/* $(".del").on("click",function () {
$(this).parent().parent().remove();
}); */
$(".del").live("click",function () {
$(this).parent().parent().remove();
});
$(".add").click(function () {
//创建新节点
var $newPro = $("<tr>"
+ "<td>"
+ "<input name=\'\' type=\'checkbox\' value=\'\' />"
+ "</td>"
+ "<td>"
+ "<img src=\'../image/computer.jpg\' class=\'products\' />"
+ "<a href=\'#\'>联想笔记本电脑</a>"
+ "</td>"
+ "<td>¥3189元</td>"
+ "<td>"
+ "<img src=\'../image/subtraction.gif\' width=\'20\' height=\'20\' />"
+ "<input type=\'text\' class=\'quantity\' value=\'1\' />"
+ "<img src=\'../image/add.gif\' width=\'20\' height=\'20\' />"
+ "</td>"
+ "<td><a href=\'#\' class=\'del\'>删除</a></td>"
+ "</tr>");
//在table中插入新建节点
$("table").append($newPro);
});
$("button").bind({
click:function(){},
mouseover:function(){ },
mouseout:function(){ }
});
$("th input[type=\'checkbox\']").on("click",function(){
if($(this).attr("checked")=="checked"){//点击全选复选框 全选所有商品
var $selectAll = $("tr td input[type=\'checkbox\']");
//alert($selectAll.length);
$selectAll.each(function(){
$(this).attr("checked","checked");
});
}else{//点击全选复选框 取消全选所有商品
var $selectAll = $("tr td input[type=\'checkbox\']");
//alert($selectAll.length);
$selectAll.each(function(){
$(this).attr("checked",false);
});
}
});
$("tr td input[type=\'checkbox\']").live("click",function (){//给所有的checkbox多选框绑定click事件
var i =0;//声明一个变量记录选中的个数
$("tr td input[type=\'checkbox\']").each(function(){
if($(this).attr("checked")=="checked"){//如果选中记录数+1
i=i+1;
};
});
if(i==$("tr td input[type=\'checkbox\']").length){//如果全部选中则将全选按钮设为选中状态
$("th input[type=\'checkbox\']").attr("checked","checked");
}else{
$("th input[type=\'checkbox\']").attr("checked",false);
};
});
});
</script>
实现效果:
点击全选----则商品内容全部选中 取消选中全选则全部取消 代码天蓝色部分效果如图
点击添加按钮可以添加预先设置好的元素及代码蓝色部分 效果如图
依次选中单个账单,当账单全部被选中时,全选按钮被设为选中状态,代码红色部分,若没全部选中时则状态不变 效果如图
**********************以上内容仅是学习总结,仅供参考**********************
以上是关于Jquery实现账单全部选中和部分选中管理的主要内容,如果未能解决你的问题,请参考以下文章
如何实现Jquery复选框选中全部/取消选中带有复选框的所有功能?
jQuery实现全选框选中时选中所有复选框,取消其中一个就会取消全选框,全部选中则选中全选所在的复选框