[JQuery] Select All and invert check boxes to determine which check boxes are selected. jquery Selects all check boxes.

[JQuery] Select All and invert check boxes to determine which check boxes are selected. jquery Selects all check boxes.

This article selects and deselected all the check boxes in [JavaScript] to determine which check boxes are selected (click to open the link) as a companion article, and implements the content again in the jQuery framework, the following results are also achieved:

The layout is the same, because in the jQuery framework, you do not need to specify a specific onclick event handler for the button. You can directly use jQuery to specify the layout:

<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Then in jQuery, take the check box array whose name is checkBoxGroup, And you can directly write $ (": checkbox [name = 'checkboxgroup']"), of course, $ ("input [type = 'checkbox'] [name = 'checkboxgroup']") is fine, but $ (": checkbox [name = 'checkboxgroup']") the code is simpler. Pay attention to the colon Before the checkbox. The same as the document. getElementsByName ("xx") of Javascript, the same-digit check box array. Only in jQuery, you can directly use each to traverse. Set whether to use prop for the check box and do not use attr. For details, see [jQuery] attr and prop for the check box operation (click to open the link.


<Script type = "text/javascript"> // Where is the check box selected? $ ("# Selected "). click (function () {var str = "selected check box:"; $ (": checkbox [name = 'checkboxgroup']: checked "). each (function () {str + = $ (this ). val () + "," ;}); alert (str) ;}); // select all $ ("# selectAll "). click (function () {$ (": checkbox [name = 'checkboxgroup']"). each (function () {$ (this ). prop ("checked", true) ;}); // reselect $ ("# selectReserve "). click (function () {$ (": checkbox [name = 'checkboxgroup']"). each (function () {$ (this ). prop ("checked ",! $ (This). prop ("checked") ;};}); </script>