您好,登錄后才能下訂單哦!
在做購物車系統(tǒng)是我們往往會遇到這樣一個需求,在點擊全選框時我們要將全部的單個賬單都選中;在單個選中賬單時,如果賬單全部被選中則需要全選框處于選中狀態(tài),若沒有全部被選中則全選框處于沒選中狀態(tài);
以下是在學習過程的實現(xiàn)代碼:
<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 () {
//創(chuàng)建新節(jié)點
var $newPro = $("<tr>"
+ "<td>"
+ "<input name='' type='checkbox' value='' />"
+ "</td>"
+ "<td>"
+ "<img src='../p_w_picpath/computer.jpg' class='products' />"
+ "<a href='#'>聯(lián)想筆記本電腦</a>"
+ "</td>"
+ "<td>¥3189元</td>"
+ "<td>"
+ "<img src='../p_w_picpath/subtraction.gif' width='20' height='20' />"
+ "<input type='text' class='quantity' value='1' />"
+ "<img src='../p_w_picpath/add.gif' width='20' height='20' />"
+ "</td>"
+ "<td><a href='#' class='del'>刪除</a></td>"
+ "</tr>");
//在table中插入新建節(jié)點
$("table").append($newPro);
});
$("button").bind({
click:function(){},
mouseover:function(){ },
mouseout:function(){ }
});
$("th input[type='checkbox']").on("click",function(){
if($(this).attr("checked")=="checked"){//點擊全選復(fù)選框 全選所有商品
var $selectAll = $("tr td input[type='checkbox']");
//alert($selectAll.length);
$selectAll.each(function(){
$(this).attr("checked","checked");
});
}else{//點擊全選復(fù)選框 取消全選所有商品
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;//聲明一個變量記錄選中的個數(shù)
$("tr td input[type='checkbox']").each(function(){
if($(this).attr("checked")=="checked"){//如果選中記錄數(shù)+1
i=i+1;
};
});
if(i==$("tr td input[type='checkbox']").length){//如果全部選中則將全選按鈕設(shè)為選中狀態(tài)
$("th input[type='checkbox']").attr("checked","checked");
}else{
$("th input[type='checkbox']").attr("checked",false);
};
});
});
</script>
實現(xiàn)效果:
點擊全選----則商品內(nèi)容全部選中 取消選中全選則全部取消 代碼天藍色部分效果如圖
點擊添加按鈕可以添加預(yù)先設(shè)置好的元素及代碼藍色部分 效果如圖
依次選中單個賬單,當賬單全部被選中時,全選按鈕被設(shè)為選中狀態(tài),代碼紅色部分,若沒全部選中時則狀態(tài)不變 效果如圖
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。