Code instance for simulating and beautifying checkbox check boxes and checkbox check boxes
Code example for simulating and beautifying the checkbox check box:
This section describes how to simulate and implement the checkbox check box through code examples.
Because the built-in check box function is not beautiful enough, we will introduce it through code examples below.
The code example is as follows:
<! DOCTYPE html>
The above code implements our requirements. The following describes the implementation process.
I. Code comments:
(1). $ (function () {}). When the document structure is fully loaded, run the code in the function.
(2). $ ('. checkbox'). on ('click', function () {}), register the click event processing function for the elements whose class attribute value is checkbox.
(3). if ($ (this). siblings ("input [type = 'checkbox']"). is (': checked ')){
$ (This). removeClass ('cur ');
$ (This). siblings ("input [type = 'checkbox']"). removeProp ('checked ')
} To check whether the check box is selected.
If it is selected, the cur style class of the label is deleted. In this way, the image background is not checked.
(4). else {
$ (This). addClass ('cur ');
$ (This). siblings ("input [type = 'checkbox']"). prop ('checked', 'checked ')
}. Otherwise, add the cur style class and select the check box.
Ii. Related reading:
(1). on () can refer to the detailed description of jquery's on () binding event processing functions.
(2). For details about siblings (), refer to the siblings () method section of jQuery.
(3) For details about. input [type = 'checkbox'], see [attribute = value] selector in jQuery.
(4) For the. is () method, see the is () method section of jQuery.
(5). For more information about checked, see section checked selector in jQuery.
(6). removeProp () can refer to the removeProp () method section of jQuery.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 18243.
For more information, see: http://www.softwhy.com/jquery/