Subscribe - It's FREE!!

Stay Connected Here

Stay Updated With Us Here



Google

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


Share with WhatsApp


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.



If you enjoyed this post take 5 seconds to share it! Be Socialable. :-)

Share with WhatsApp

Posts To Read Next

How to select all checkboxes between two checkboxes in jQuery

JQuery code to select all checkboxes between two selected checkboxes with select all and deselect all functionality. Easy to use in MVC, asp.net or in HTML.


Typewriter - Automatic TypeScript Template generation from C# classes in Visual Studio

Typewriter, an extension for visual studio that generates TypeScript files from C# code files using TypeScript templates. Convert your C# model classes to TypeScript automatically.


How to call click or any event only once in jQuery

Know how to execute an click event or any event only once for any element in jQuery. Perform action only once and even not required to unbind event.


Copy changed data in table from one database to another in SQL stored procedure

How to copy or merge changed data in table from one database to another having same schema is the topic of this post.


Top 10 Visual Studio things which can boost developers coding speed

Visual Studio 2012 provides some coding features by which you can code faster if use them properly. This post will cover top 10 things among them to boost your development speed.


Your opinion is valuable for us! Comments, suggetions are welcome.


Submit your Email Id to stay updated with us and get notified with our new posts. It's FREE!
Vu 32'' TV Vu 24'' TV
We know this popup is disturbing you!
But We would greatly appreciate if you share us with your friends below!

It will not take more than 2 seconds but will motivate us greatly to write more,share more!

x