<!DOCTYPE html>
<html lang="en">
<head>
    
    <title>Check multiple boxes</title>
    
</head>
<body>
    <div class="container">
        <div class="input-group">
            <div class="input-group-text">
              <input class="form-check-input mt-0"  id="group-1"  type="radio" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-1" value="" aria-label="Text input with radio buttons">
          </div><br>
          <div class="input-group">
            <div class="input-group-text">
              <input class="form-check-input mt-0" id="group-2"type="radio" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-2" value=""  aria-label="Text input with radio buttons">
          </div><br>
          <div class="input-group">
            <div class="input-group-text">
              <input class="form-check-input mt-0" id="group-3"type="radio" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-3" value=""  aria-label="Text input with radio buttons">
          </div><br>
          <div class="input-group">
            <div class="input-group-text">
              <input class="form-check-input mt-0" id="group-4" type="radio" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-4" value=""  aria-label="Text input with radio buttons">
          </div><br>
          <div class="input-group" >
            <div class="input-group-text">
              <input class="form-check-input mt-0" type="radio" id="group-5" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-5" value=""  aria-label="Text input with radio buttons">
          </div><br>

          <div class="input-group" >
            <div class="input-group-text">
              <input class="form-check-input mt-0" id="group-6" type="radio" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-6" value=""  aria-label="Text input with radio buttons">
          </div><br>
          <div class="input-group" >
            <div class="input-group-text">
              <input class="form-check-input mt-0" id="group-7" type="radio" value="" aria-label="Radio button for following text input">
            </div>
            <input type="text" class="form-control group-7" value=""  aria-label="Text input with radio buttons">
          </div>
    </div>
   
</body>
</html>
.input-group{
    display:flex;
    gap:1rem;
}
body{
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 30vh;  
   overflow-y: hidden;
   background-color: beige;
}
console.log('hello');
//taking all radiobox
let radioboxes=document.getElementsByClassName('form-check-input');
//id- takes of form, flag will see if shift is pressed or not,last will store the last value clicked by user, current stores value clicked by user after pressing shift
let id,flag=false,last,current;
for(radio of radioboxes){
    
    radio.addEventListener('click',(e)=>{
        id=e.target.id;
        linethrough(id);
        if(flag==false) last=e.target.id;
        //flag=false means shift is not pressed hence value of last is updated.
    })
    
//to add line through css to text for given id   
}
function linethrough(id){
    value=id;
    document.querySelector(`.${value}`).style="text-decoration:line-through";
    console.log(value)
}

//if key is pressed and it is shift.
document.addEventListener('keydown',(e)=>{
    if(e.key==='Shift')
    {   flag=true; //set flag to true
        Array.from(radioboxes).forEach(radio=>{
            //now we will store the index of radio to the current.
            radio.addEventListener('click',(e)=>{
                current=e.target.id;
                selectMultiple();
                
            })
        })
    }
})
//this function will check and line through on all elements in between.
function selectMultiple(){
    //this will take numeric value in index. format of index ig group-number
    currindex=current[current.length-1];
     lastindex=last[last.length-1];
     //start will take the smaller value of both index numeric part. Loop will begin from here
    start=(currindex<lastindex?currindex:lastindex);
    //end takes the last value
    end=(currindex>lastindex?currindex:lastindex);
    //loop over each element. Give id to group-number and check and line through at this id.
        for(i=start;i<=end;i++)
        { id=`group-${i}`;
          document.getElementById(`${id}`).checked=true;
           linethrough(id);
        }  
    
   
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.