Use a custom image instead of the native checkbox to achieve full selection, deletion, and submission,

Use a custom image instead of the native checkbox to achieve full selection, deletion, and submission,

The UI sister thinks that the native checkbox check box is too ugly and must be replaced by images. The effect is similar to the following:

To replace the native checkbox. So we need to implement what native checkbox can do. We can mainly implement these points.

1. Click Select image in the list. The image changes to the opposite.

2. If you select all items in the current status, if you do not select one item in the list, all images in the selected area become unselected.

If you click an item to make the list fully selected, the picture in the all selected area changes to the selected status.

3. Select All

4. Click Delete to delete all selected images.

1. Preparation: Because switching between two images is required, we define it separately:

var uncheckUrl = 'images/uncheck.png'; var checkUrl = 'images/check.png'; 

2. Click "select image" in the list to change the image to the opposite, which may lead to changes in all images.

We use the on event because the information in the list is dynamically added.

// Click the check box image $ ("# ul "). on ('click', 'Li img ', function (event) {var imgDom = $ (this); if (imgDom. attr ("src") = checkUrl) {$ ("# SelectAllImg "). attr ("src", uncheckUrl); imgDom. attr ("src", uncheckUrl);} else {imgDom. attr ("src", checkUrl); // The above part is to change the image itself, and the following part is to check whether to change all images. // Compare the total number of images and the number of selected images. Var imgLength = $ ('# ul li img '). length; var checkLength = 0; for (var I = 0; I <= imgLength; I ++) {if ($ ('# ul li img '). eq (I ). attr ("src") = checkUrl) {checkLength ++;} if (imgLength = checkLength) {$ ("# SelectAllImg "). attr ("src", checkUrl );}}});

3. Select All. When you change the all-selected icon, change all icons to be consistent with the all-selected icon.

// Select all the icons $ ("# SelectAllImg "). click (function () {if ($ (this ). attr ("src") = checkUrl) {$ (this ). attr ("src", uncheckUrl); $ ("# ul li img "). attr ("src", uncheckUrl);} else {$ (this ). attr ("src", checkUrl); $ ("# ul li img "). attr ("src", checkUrl );}});

4. deletion. Click Delete to delete the row of the selected image.

Note:The loop isInverted Loop. The reason for this is: if the order loop is performed, the actual imglength becomes smaller after the row is deleted, and the index values of all subsequent nodes change and move forward, however, if eq (I) is used to delete a node with the serial number I, the node cannot be deleted.

// Delete the selected data $ ("# del "). click (function () {var imgLength = $ ('# ul li img '). length; var checkDom = ''; for (var I = imgLength-1; I> = 0; I --) {checkDom = $ ('# ul li img '). eq (I); if (checkDom. attr ("src") = checkUrl) {checkDom. parent (). remove ();};};});

5. What should we do when we finally submit the form? Do we use ajax or direct form submit for submission?
Here we provide two solutions.

5.1I prefer ajax.

Similarly, deviceIdArr obtains the content of the selected box. You need to obtain the id of this column.

var deviceIdArr = []; $('#ul li img').each(function() {   if($(this).attr('src') == checkUrl){     deviceid = trim($(this).parent().text());     deviceIdArr.push(deviceid);   } }); 

5.2Form submission ideas.

Put a hidden real checkbox next to each image checkbox. In this way, the user will not be able to see it.

Each time a selected image is modified, the selected status of the checkbox is hidden accordingly,

At the end of the submission, you can directly submit and hide the checkbox status.

During debugging, the hidden checkboxes can be displayed, so that we can intuitively see whether the corresponding status of the checkbox and the image is accurate.

6. Some Optimization suggestions. To avoid switching the image latency when you click an image for the first time, you can pre-load images in the selected status and images in the unselected status.

For example, the unselected icon is displayed by default, but the selected icon is not displayed. If you load it again when you click it, there will be a sense of latency.

Solution, Add this sentence at the bottom of the page:

Of course, you can also use the CSS Sprites Sprite.

Note: This article usesJQueryTo replace the native checkbox check box with custom images for full selection, deletion, and form submission.

Change to nativeJavaScriptIt's not hard.

The above is a small Editor for you to use custom images instead of native checkbox to achieve full selection, deletion and submission of all the content, I hope you can support a lot of help house ~