CODEWITHSUNDEEP
javascriptphpjquerycheckbox
Giuseppe
Giuseppe

Reputation: 5

check multiple checkbox from first click to second click using jquery

Sorry for my english. I have several checkboxes like these:

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

If I check the checkbox number two and the checkbox number seven, it is possible to automatically check with JQUERY the checkboxes from the number two and the number seven?

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" checked />2
<input type="checkbox" name="data[]" value="3" checked />3
<input type="checkbox" name="data[]" value="4" checked />4
<input type="checkbox" name="data[]" value="5" checked />5
<input type="checkbox" name="data[]" value="6" checked />6
<input type="checkbox" name="data[]" value="7" checked />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

Thanks!

Upvotes: 0

Views: 2110

Answers (3)

Bilal Siddiqui
Bilal Siddiqui

Reputation: 3629

This is how I could acheive that:

var checked = [];
$(":checkbox").click(function() {
    if (!$(this).is(':checked')) {
       // Optional sanity
       // if you wish to make user available to uncheck 
       return;
    }
    var min = $(':checkbox:checked:first').val();
    var max = $(':checkbox:checked:last').val();
    for (var index = Number(min)+1; index < Number(max); index++) {
      $(`[type="checkbox"][value='${index}']`).prop("checked", true);
    }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

Upvotes: 1

Ram Segev
Ram Segev

Reputation: 2573

You can use pseudo selectors first and lastand loop between then

$('[type="checkbox"]:checkbox').change(function() {
  var first = $('[type="checkbox"]:checked:first').val();
  var last = $('[type="checkbox"]:checked:last').val();
  for(var i = first; i <= last; i++){
    $('[type="checkbox"][value="'+i+'"]').prop( "checked", true );
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

Upvotes: 2

Ayrton
Ayrton

Reputation: 2303

Perfectly possible. You could do something like this (it'll require you to add an id to your inputs. I'll use myCheck):

let first = null;

function clicked(event) {
    if(first) {
        let second = parseInt(event.target.value, 10);

        let a = first < second ? first : second;
        let b = first < second ? second : first;

        for(let i = a; i <= b; i++) {
            $('#myCheck[value="' + i + '"]').attr('checked', true);
        }

        first = null;
    }
    else {
        first = parseInt(event.target.value, 10);
    }
}

Then, just use clicked on your click event. Check it out: https://jsfiddle.net/7pf45mbz/1/

In some cases, you might have to use prop instead of attr. However, for your use case it would probably be better user experience if you used a select element with multiple instead of checkboxes.

Upvotes: 0

Related Questions