check multiple checkbox from first click to second click using jquery

Question

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!

there's already an answer in stackoverflow.com/questions/3197702/… — Milad Deraawi
– Milad Deraawi, Commented Oct 30, 2019 at 11:58
It is possible with jQuery , but better write a logic rather than same class othervise when you need to modify the code again and again. I think you need to perform the check based on some logic right — Anoop P S
– Anoop P S, Commented Oct 30, 2019 at 12:00

Ram Segev · Accepted Answer · 2019-10-30 12:40:12Z

2

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

edited Oct 30, 2019 at 12:40

answered Oct 30, 2019 at 12:14

Ram Segev

2,5612 gold badges14 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bilal Siddiqui Over a year ago

consider chosing checkbox also in selector $('[value="'+i+'"]').

Bilal Siddiqui Over a year ago

unnecessary to select first and last while looping, better i = first + 1; i < last

Bilal Siddiqui · Accepted Answer · 2019-10-30 12:44:00Z

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

Ayrton · Accepted Answer · 2019-10-30 12:12:23Z

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.

Collectives™ on Stack Overflow

check multiple checkbox from first click to second click using jquery

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related