This is the 12th day of my participation in Gwen Challenge

Hold Shift to Check Multiple Checkboxes

The main purpose of this module is to realize checkbox multi-selection operation by manipulating the keyboard keys after pressing the Shift key. A set of input tags of type CheckBox are provided in the initial document, and when a checkbox is selected, its text shows the strikeout effect. According to the initialization document provided by the original author, we completed the implementation effect.

1. Effect display

1.index-START.html

2.index-FINISHED.html

3. My effect

Second, the implementation

The final code

<script> ; (function(){
      const checkboxes = Array.from(document.querySelectorAll('.inbox input[type="checkbox"]'));
  
      let lastCheck = null;
  
      function clickHandler(e){
        console.log(e);
        if(this.checked){
          if(e.shiftKey && lastCheck ! = =null) {let nowCheck = checkboxes.indexOf(this);
            checkboxes.slice(
              Math.min(nowCheck.lastCheck),
              Math.max(nowCheck,lastCheck)
              )
              .forEach(input= > (input.checked = true));
          }
          lastCheck = checkboxes.indexOf(this);  // If it is checked, record it
        } else {
          lastCheck = null;  // Otherwise clear
        }
      }
  
      checkboxes.forEach(input= >{
        input.addEventListener("click",clickHandler);
      })
    })()
  </script>
Copy the code

Iii. Summary and review

After getting the topic of the module, we first do a reflection. I feel very interesting in this part of the module.

What happens when you press Shift on the keyboard to perform multiple operations? Let’s restore the whole process and analyze the original author’s solution.

  1. Select one item (a);

  2. Press the Shift key;

  3. Select one item (denoted b);

  4. Everything in between a and B is selected.

So that’s what the whole process looks like, that’s how it’s described, so that raises some questions for me.

  • What if I had pressed the Shift button in the first place?

  • What happens if I select something, and THEN I cancel it, and then I press the Shift key?

  • If I select one item and hold down the Shift key to select another item, then I deselect one item between A and B, then I hold down the Shift key again and select another item (c), will the selected part contained between a and B be deselected?

And with those questions in mind, I went to the final implementation of the original, and I found:

When I first enter the page and do not select an item, I directly press the Shift key, then all the content is selected.

You see, so ordinary and confident.

And then I thought about it a little bit, and I realized that actually from the beginning I was like —

If you want to select the part between A and B when you hold down the Shift key, you use a variable to mark the range. Initialize the variable to false, and when the Shift key is held down and an element is selected at the same time, iterate over all items in the range, inverting the marker if a or B is encountered. Also, set all items marked true to selected. This is where we get what we want.

The problem with this is that when you go to the page and you hold down Shift and click on an item, everything after that item will be selectedFinished, all of a sudden the idea of transnational integration, and then are also a bug. And, for deselect, there is no batch operation.

So let’s choose to try it in another way, “slice.”

Process decomposition

1. Select all checkbox elements. Find all input elements of type checkbox, and make Array by array. from. .

const checkboxes = Array.from(document.querySelectorAll('.inbox input[type="checkbox"]'));
Copy the code

So how is Arrary. From used?

MDN uninvited!

Link: developer.mozilla.org/zh-CN/docs/…

And now it’s going to look like this.

  1. Event listening.
    function clickHandler(e){
      console.log(e);
    }

    checkboxes.forEach(input= >{
      input.addEventListener("click",clickHandler);
    })
Copy the code

You can start by looking at the properties of e in the clickHandler method.

So we know that we are manipulating shiftKey, and when we hold down the Shift key to select an item, shiftKey’s status changes to True.

  1. Interval A.
 let lastCheck = null;

    function clickHandler(e){
      console.log(e);
      if(this.checked){
        lastCheck = checkboxes.indexOf(this);  // If it is checked, record it
      } else {
        lastCheck = null;  // Otherwise clear
      }
    }

    checkboxes.forEach(input= >{
      input.addEventListener("click",clickHandler);
    })
Copy the code
  1. Effect realization:
,let lastCheck = null;
  
      function clickHandler(e){
        console.log(e);
        if(this.checked){
          if(e.shiftKey && lastCheck ! = =null) {let nowCheck = checkboxes.indexOf(this);
            checkboxes.slice(
              Math.min(nowCheck.lastCheck),
              Math.max(nowCheck,lastCheck)
              )
              .forEach(input= > (input.checked = true));
          }
          lastCheck = checkboxes.indexOf(this);  // If it is checked, record it
        } else {
          lastCheck = null;  // Otherwise clear
        }
      }
  
      checkboxes.forEach(input= >{
        input.addEventListener("click",clickHandler);
      })
Copy the code

This has already implemented our function:

4. Key and difficult points

Most probability has been analyzed to the above summary to do some thinking, although it went wrong on the set, but still perfect interpretation, after all – adults, are not easy!

Remember to study on time!