2

i am trying all checkbox checked with shift key like Gmail Shift + Mouse Click. One by One is working, it is a div. But when i add shift key code it's not worked.

Changed:

almost done. when i click first, and then press shift key and then click 5th all checked, but when i click on 3rd then getting problem.! not unchecked till 5th to 3rd.

let held = false;
  let indexes = {start: null, end: null};
  let start = false;
  document.onkeydown = function(e) {
   if(e.keyCode == 16) {
    held = true;
   }
  }
  document.onkeyup = function(e) {
   if(e.keyCode == 16) {
    held = false;
   }
  }
  $(document).on('click','.dropCheckBox',function(){
   $(this).parents(".capturesGrid").toggleClass('selected');
   $(this).toggleClass('active');
   if($(".grid-view .selected").length > 0) 
   {
    $(this).parents(".grid-view").addClass('checking');
    $(".options-bar").addClass('allSection');
    $(".iconActions").removeClass('d-none');
    $(".allsec-det").addClass('allSection-det');
    
   }
   else 
   {
    $(this).parents(".grid-view").removeClass('checking');
    $(".options-bar").removeClass('allSection');
    $(".iconActions").addClass('d-none');
    $(".allsec-det").removeClass('allSection-det');
   }
   if(held) {
    indexes.end = $(this).data('index');
    if(indexes.start) {
     console.log(indexes);
     if(indexes.end < indexes.start) {
      $('.dropCheckBox').each(function(index, item) {
       item = $(item);
       if(!$(this).hasClass('active')) {
        if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
         if(!item.hasClass('active')) {
          item.addClass('active');
          $(this).parents(".grid-view").addClass('checking');
          $(this).parents(".capturesGrid").toggleClass('selected');
         }
        }
       } else {
        if(item.data('index') && item.data('index') < indexes.start && item.data('index') > indexes.end) {
         if(item.hasClass('active')) {
          item.removeClass('active');          
          $(this).parents(".grid-view").removeClass('checking');
          $(this).parents(".capturesGrid").toggleClass('selected');
         }
        }
       }
      });
     }
    } else {
     $('.dropCheckBox').each(function(index, item) {
     item = $(item);
     if(!$(this).hasClass('active')) {
      if(item.data('index') && item.data('index') < indexes.end) {
       if(!item.hasClass('active')) {
        item.addClass('active');
        $(this).parents(".grid-view").addClass('checking');
        $(this).parents(".capturesGrid").toggleClass('selected');
       }
      }
     } else {
      if(item.data('index') && item.data('index') < indexes.end) {
       if(item.hasClass('active')){
        item.removeClass('active');
        $(this).parents(".grid-view").removeClass('checking');
        $(this).parents(".capturesGrid").toggleClass('selected');
       }
      }
     }
    })
    }
    indexes = {start: null, end: null};
    start = false;
    
   } else {
    indexes.start = $(this).data('index');
   }
   
  });
.dropCheckBox {

    position: static;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    border: 2px solid #fff;
    transition: all .2s ease;

}

.dropCheckBox.active {
    background: linear-gradient(0deg, #214fc6, #4574ec);
    border: none;
}

.capturesGrid .dropCheckBox {

    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 1;
    z-index: 2;

}
.dropCheckBox .icon {

    width: 13px;
    height: 13px;
    fill: #dee3eb;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grids-row">
<div class="row">
  <div class="col">
   <div class="capturesGrid">
    <div data-index="0" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="1" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="2" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="3" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="4" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="5" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="6" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="7" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="8" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>

</div>
</div>
Hassan Javed
  • 160
  • 1
  • 13
  • looks fine to me. Working to select multiple checkbox with and without the shift key – Lelio Faieta Feb 04 '20 at 12:08
  • @LelioFaieta i guess the OP wants the check the boxes by hitting the shift key - but I don't know how he wants to switch to the next element (propably using tab key) – messerbill Feb 04 '20 at 12:10
  • i need like Gmail checked by pressing Shift+mouse click – Hassan Javed Feb 04 '20 at 12:14
  • Do you mean, select all of them by clicking the first one and the last one? – I_Al-thamary Feb 04 '20 at 12:53
  • @i_thamary this is not what i mean..! my `javascript` selected process is working well. but i need that when click on first checkbox then press shift key and select last check box and ALL `checked` and then if i `deSelect` any one checkbox then it uncheck. Thanks – Hassan Javed Feb 04 '20 at 13:00

1 Answers1

1

You can use the checkbox and you can find different answers here

$(document).ready(function() {
    var $chkboxes = $('.dropCheckBox');
    var lastChecked = null;
    
    $chkboxes.click(function(e) {
    $(this).parents(".capturesGrid").toggleClass('selected');
   $(this).toggleClass('active');
      
        if(!lastChecked) {
            lastChecked = this;
            return;
        }
       
        if(e.shiftKey) {
        $(this).removeClass('active');
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);
           
           

    $chkboxes.slice(Math.min(start,end)+1, Math.max(start,end)+1).toggleClass('active');
       
 
        }

        lastChecked = this;
    });
});
.dropCheckBox {

    position: static;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: rgba(0,0,0,0.7);
    cursor: pointer;
    border: 2px solid #fff;
    transition: all .2s ease;

}

.dropCheckBox.active {
    background: linear-gradient(0deg, #214fc6, #4574ec);
    border: none;
}

.capturesGrid .dropCheckBox {

    position: absolute;
    top: 10px;
    left: 10px;
    opacity: 1;
    z-index: 2;

}
.dropCheckBox .icon {

    width: 13px;
    height: 13px;
    fill: #dee3eb;

}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="grids-row">
<div class="row">
  <div class="col">
   <div class="capturesGrid">
    <div data-index="1" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="2" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="3" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="4" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="5" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="6" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="7" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="8" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>
  <div class="col">
   <div class="capturesGrid">
    <div data-index="9" class="dropCheckBox">
        <svg class="icon icon--check" viewBox="0 0 1024 1024">
          <path d="M358.4 618.667l-204.8-213.333-153.6 160 358.4 373.333 665.6-693.333-153.6-160z"></path>
        </svg>
      </div>
  </div>
  </div>

</div>
</div>
I_Al-thamary
  • 3,385
  • 2
  • 24
  • 37