How to select all checkboxes as per range of numbers in jQuery MVC

In this post I will cover information about how to select checkboxes of bootstrap HTML table as per range provided using jQuery code. If you haven't read my previous post about "How to select checkboxes between first and last selected checkbox" then it is recommended to read it so you will have the knowledge of code which has been repeated in this post.

As I mentioned in my previous post there was requirement of selecting checkboxes within first and last selected, select all and deselect all along with selection of checkboxes as per range provided which I will share in this post.

As like previous post I have added a class named "chkSelect" for each checkbox to identify it as group in jQuery code.

Now let's check the code.

I have already explained a code for select all and deselect all functionality so I will directly move on the core code of this post.
 

  $("#txtfromRange,#txttoRange").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }  
   });

Above code is to restrict invalid characters or symbols in range inputs as you must allow only numbers.

 $("#txtfromRange,#txttoRange").keyup(function (e) {

            var fromNum = parseInt($("#txtfromRange").val());
            var toNum = parseInt($("#txttoRange").val());

            ValidateRange(fromNum, toNum);
   });

Now in above code I have handled a keyup event of range inputs i.e. from and to textboxes and have called a range validater function named "ValidateRange". Before sending value of these textboxes I have parsed them into integer for safer check.

.max_exceeded {
        border: 1px solid red;
        background-color: #ead6d6;
    }

In CSS code above I have created a class named "max_exceeded" which I have used to indicate that user has provided a invalid range.

function ValidateRange(fromNum, toNum) {
            if ($("#txtfromRange").val() == '' && $("#txttoRange").val() == '') {
                $("#txtfromRange").removeClass("max_exceeded");
                $("#txttoRange").removeClass("max_exceeded");
                $("#chkSelectAll").prop("checked", false);
                $(".chkSelect").prop("checked", false);
                return false;
            }

            if ($("#txtfromRange").val() == '' && $("#txtfromRange").hasClass("max_exceeded")) {
                $("#txtfromRange").removeClass("max_exceeded");
                return false;
            }
            if ($("#txttoRange").val() == '' && $("#txttoRange").hasClass("max_exceeded")) {
                $("#txttoRange").removeClass("max_exceeded");
                return false;
            }

            if (isNaN(fromNum) && $("#txtfromRange").val() != '') {
                $("#txtfromRange").select();
                $("#txtfromRange").focus();
                $("#txtfromRange").addClass("max_exceeded");
                return false;
            }
            else
                $("#txtfromRange").removeClass("max_exceeded");

            if (isNaN(toNum) && $("#txttoRange").val() != '') {
                $("#txttoRange").select();
                $("#txttoRange").focus();
                $("#txttoRange").addClass("max_exceeded");
                return false;
            }
            else
                $("#txttoRange").removeClass("max_exceeded");


            if (fromNum == 0 || toNum == 0 || fromNum > toNum || fromNum > count_of_record || toNum > count_of_record) {
                 if($("#txtfromRange").val() != '')
                $("#txtfromRange").addClass("max_exceeded");
                if($("#txttoRange").val() != '')
                $("#txttoRange").addClass("max_exceeded");
                return false;
            }

            return true;
 }

Now if you read a code of "ValidateRange" function above you can easily understand that I have handled several validations like below.

• Whether provided range is valid and in numbers
• Whether number provided in "To" textbox is lower than total count of records or not
• Whether from value is less than to value or not and viceversa.

function selectRange() {
            try {
                var fromNum = parseInt($("#txtfromRange").val());
                var toNum = parseInt($("#txttoRange").val());

                if (ValidateRange(fromNum, toNum)) {
                    $("#txtfromRange").removeClass("max_exceeded");
                    $("#txttoRange").removeClass("max_exceeded");
                    $("#chkSelectAll").prop("checked", false);
                    $(".chkSelect").prop("checked", false);
                    for (var indx = fromNum - 1; indx < toNum; indx++) {
                        $('.chkSelect').eq(indx).prop("checked", true);
                    }
                }


            }
            catch (e) {
                $("#chkSelectAll").prop("checked", false);
                $(".chkSelect").prop("checked", false);
            }
}

In above funciton named "selectRange" I have selected the checkboxes before which range has been validated and if it is valid then just have looped over from and to number and selected a checkbox.

  $("#btnApplyRange").click(function () {
            if($("#txtfromRange").val() != '' && $("#txttoRange").val() != '')
            selectRange();
   });

And now in above code I have binded a click event to a button by clicking on which selection gets performed.

That's it. Now if you run the code and try to select checkboxes as per range you will have all mentioned behaviour. This code may have places where you can optimize the code but as I have achieved it step by step and now I don;t want to do it again so sharing as it is. :-)

Check out live fiddle of above code and don't forget to share this information with your friends by clicking on any of the share button provided. Thanks.