jquery implementation of all billing and partial check management

In the shopping cart system is we often encounter such a demand, when clicking on the full box we will have to select all the individual bills, when a single selected bill, if all the bill is selected to be selected, if not all selected box is unchecked;

The following is the implementation code in the learning process:

<script type= "Text/javascript" >
$ (document). Ready (function () {
Delete Current line item element
$ (". 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 () {
Create a new node
var $newPro = $ ("<tr>"
+ "<td>"
+ "<input name=" type= ' checkbox ' value= '/> '
+ "</td>"
+ "<td>"
+ " '
+ "<a href= ' # ' > Lenovo Laptop </a>"
+ "</td>"
+ "<td>￥3189 yuan </td>"
+ "<td>"
+ " '
+ "<input type= ' text ' class= ' quantity ' value= ' 1 '/>"
+ " '
+ "</td>"
+ "<td><a href= ' # ' class= ' del ' > Delete </a></td>"
+ "</tr>");
Inserting a new node in a table
$ ("table"). Append ($newPro);
});
$ ("button"). Bind ({
Click:function () {},
Mouseover:function () {},
Mouseout:function () {}
});

$ ("th input[type= ' checkbox ']"). On ("click", Function () {
if ($ (this). attr ("checked") = = "Checked") {//Click the Select all check box select all Items
var $selectAll = $ ("tr TD input[type= ' checkbox ']");
Alert ($selectAll. length);
$selectAll. each (function () {
$ (this). attr ("Checked", "checked");
});
}else{//Click the Select all check box to deselect all items
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 () {//) bind the Click event to all checkboxes multi-box
var i =0;//declares a variable to record the selected number
$ ("tr TD input[type= ' checkbox ']"). each (function () {
if ($ (this). attr ("checked") = = "Checked") {//If the number of records is selected +1
i=i+1;
};
});
if (i==$ ("tr TD input[type= ' checkbox ']"). Length) {//Select the Select All button if all selected
$ ("th input[type= ' checkbox ']"). attr ("Checked", "checked");
}else{
$ ("th input[type= ' checkbox ']"). attr ("checked", false);
};
});
});
</script>

Implementation results:

Click the Select all----the contents of the product are all checked uncheck all Select all Cancel code Azure part effect

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/1017611/201612/ 1017611-20161224160725995-1488257618.png "style=" border:0px; "/>650" this.width=650; "src=" http:/ Images2015.cnblogs.com/blog/1017611/201612/1017611-20161224160847807-569133936.png "style=" border:0px; "/>

Click the Add button to add a pre-set element and code Blue part effect

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/1017611/201612/ 1017611-20161224161156448-1877006703.png "style=" border:0px; "/>

Select a single bill in turn, when the bill is all selected, the Select All button is selected, the Code Red section, if not all of the state will not change the effect

650) this.width=650; "Src=" http://images2015.cnblogs.com/blog/1017611/201612/ 1017611-20161224161352979-1790586481.png "style=" border:0px; "/>650" this.width=650; "src=" http:/ Images2015.cnblogs.com/blog/1017611/201612/1017611-20161224161427292-237468287.png "style=" border:0px; "/>

jquery implementation of all billing and partial check management