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

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

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

The above content is only a summary of the study, for reference only **********************

jquery implementation of all billing and partial check management