Use a custom picture instead of a native checkbox to implement a full selection, delete, and submit methods _jquery

UI sister think the native CheckBox checkbox is too ugly to use a picture to replace it, that's according to her. The effect would be similar:

To replace the native checkbox. Then realize what the native checkbox is capable of. We mainly realize these points on the go.

1. Click the tick in the list. The picture will change to the opposite.

2. If the current is a fully selected state, do not check an item in the list, the full selection of the picture into an unchecked state.

If you click on an item to make the list a fully selected state, the entire selection of pictures becomes checked.

3. Select All function

4. Click Delete to delete all the checked pictures.

1. Preparation: Because to use a large number of two pictures of the switch, we define it individually:

var uncheckurl = ' images/uncheck.png '; 

2. Click on the check in the list, the picture becomes the opposite, and may cause the change of all selected pictures.

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

Click the check box picture 
$ ("#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 section is to transform the picture itself, the following section is to detect whether to transform all selected pictures. 
    //By comparing the total number of pictures and the number of selected pictures to decide. 
    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 function. Change all icons at the same time as the full selection icon.

Fully selected icon 
$ ("#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. Delete function. Click the Delete button to delete the row of the selected picture.

Note: The loop inside is the reverse loop . The reason for this treatment is: if the sequential loop, then delete the previous line, the real imglength will become smaller, all the subsequent nodes of the index values have changed, moved forward, and we eq (i) to delete the number of nodes, I can not delete.

Deletes 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. In the end, how do we deal with the form when we submit it? Are we submitting it in Ajax or directly form submit?
Here are two options for thinking.

5.1 Ajax ideas, I prefer to use AJAX submission.

Similarly, Deviceidarr gets the contents of the selected box. You want to get the ID of the column, also similar.

var deviceidarr = []; 
$ (' #ul li img '). each (the function () { 
  if ($ (this). attr (' src ') = = Checkurl) { 
    DeviceID = Trim ($ (this). Parent (). Text ( )); 
    Deviceidarr.push (DeviceID); 
  } 

5.2 form submission ideas.

Next to each picture checkbox, place a hidden real checkbox. So the user can't see it.

Each time the selected picture is modified, the corresponding hidden checkbox is modified to the selected state,

It is good to submit the hidden checkbox directly when submitting the final submission.

When debugging, you can let those hidden checkbox appear, so that we visually see the checkbox and the image of the corresponding state is accurate.

6. A little optimization advice. To avoid the delay of switching pictures when you first click on the picture, you can preload the selected picture and unselected picture.

For example, we display an unchecked icon in this default state, and the selected icon is not displayed. If you wait for the click of the time to load, there will be a sense of delay.

workaround , add this sentence at the bottom of the page:

Of course, you can also use the Csssprites Wizard diagram.

Note: This article uses jQuery to use a custom picture instead of a native checkbox to select All, delete, and form submissions.

It's not hard to switch to native JavaScript .

The above is a small series for everyone to use a custom picture instead of the original checkbox to achieve the full selection, delete and submit all the content of the method, I hope that we support cloud Habitat Community ~