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.


What is Hoisting in JavaScript?

Hoisting in JavaScript, one of the most misunderstood or little understood concept in the JavaScript and remain famous as interview question for JavaScript developers and now also for angular js developer. Lets check out what it means exactly.


Swagger - Powerful Opensource Framework for RESTful API

With a Swagger-enabled API, you get interactive documentation, client SDK generation and discoverability. Swagger Editor allows you to generate code, documentation with ease.


Visual Studio Code - Lighweight but powerful source code editor available for Windows, OS X and Linux

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, OS X and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (C++, C#, Python, PHP) and runtimes.


How to post JSON string as a string in jQuery AJAX

Know how to post JSON String as string to the action method of controller in MVC.


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