Implementation Code of jquery all-selected, all-unselected, and invert-selected results [recommended], jquery all-selected

Implementation Code of jquery all-selected, all-unselected, and invert-selected results [recommended], jquery all-selected

Implementation Code of jquery all-selected, all-unselected, and invert selection results [recommended]

First, introduce jquery

<Title> haran.info _ jquery instance _ select all do not select inverse _ select-all_unselect-all_reverse </title> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8 "/> <script src ="/js/jquery-1.8.3.min.js "type =" text/javascript "> </script> <! -- Introduce Jquery -->

Style:

<styletype="text/css"><!--#div1{  width:980px;  margin:0 auto;  position:relative;  text-align:left;  padding-left:400px;  line-height:30px;  border:1px dotted #0075c5;}li{  display:block;  list-style:none;  float:left;  position:relative;  padding-left:20px;}.clr{  height:20px;}--></style> 

Body layout:

<Divid = "div1"> <divclass = "clr"> </div> <! -- Option start --> <inputtype = "checkbox"/> <ahref = "haran.info"> haran.info _ Script Programming </a> <br/> <inputtype = "checkbox"/> <ahref = "haran.info"> haran.info _ website programming </a> <br/> <inputtype = "checkbox"/> <ahref = "haran.info"> haran.info _ system management </ a> <br/> <inputtype = "checkbox"/> <ahref = "haran.info"> haran.info _ server configuration </a> <br/> <inputtype = "checkbox "/> <ahref = "haran.info"> haran.info _ system O & M </a> <br/> <inputtype = "checkbox"/> <ahref = "haran.info"> haran. I Nfo _ blog </a> <br/> <inputtype = "checkbox"/> <ahref = "haran.info"> haran.info _ homepage </a> <br/> <! -- Option END --> <! -- Function button start --> <inputtype = "button" id = "selAll" value = "select all"/> <inputtype = "button" id = "unselAll" value = "None "/> <inputtype =" button "id =" reverse "value =" invert "/> <! -- Function button ends --> <divclass = "clr"> </div> <! -- Disable div1 -->

Functions:

<Scripttype = "text/javascript"> $ (document ). ready (function () {$ ("# selAll "). click (function () {// ": checked" matches all the check boxes $ ("# div1: checkbox "). attr ("checked", true); // "# div1: checked" must be separated by spaces. checked indicates the selected status. If it is true, select fo; otherwise, false is not selected.}); $ ("# unselAll "). click (function () {$ ("# div1: checkbox "). attr ("checked", false) ;}); // use the iteration principle each (function () {}) $ ("# reverse "). click (function () {$ ("# div1: checkbox "). each (function () {$ (this ). attr ("checked ",! $ (This). attr ("checked "));//! $ (This). attr ("checked") determines the status of the check box: if selected, the status is reversed.}) ;}); </script>

The implementation code [recommended] of jquery's all-selected, all-unselected, and invert selection results is all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's house.