<div class="col-md-12 well"> <ul class="list-inline"> <li>From</li> <li><input id="txtfromRange" type="text" style="width: 50px !important; height: 35px !important" /> </li> <li>To</li> <li><input id="txttoRange" type="text" style="width: 50px !important; height: 35px !important" /></li> <li><a id="btnApplyRange" class="btn btn-primary">Select</a></li> </ul> </div> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr> <th><input type="checkbox" id="chkSelectAll"></th> <th colspan="3"> Product Name </th> <th> Cost </th> </tr> </thead> <tbody> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 1 </td> <td> 100 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 2 </td> <td> 200 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 3 </td> <td> 300 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 4 </td> <td> 400 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 5 </td> <td> 500 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 6 </td> <td> 600 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 7 </td> <td> 700 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 8 </td> <td> 800 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 9 </td> <td> 900 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 10 </td> <td> 1000 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 11 </td> <td> 1100 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 12 </td> <td> 1200 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 13 </td> <td> 1300 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 14 </td> <td> 1400 </td> </tr> <tr> <td class="text-nowrap"><input class="chkSelect" type="checkbox" value="true"> </td> <td colspan="3"> Product 15 </td> <td> 1500 </td> </tr> </tbody> </table> </div>
var count_of_record =15; $("#chkSelectAll").bind("change", function () { $(".chkSelect").prop("checked", $(this).is(":checked")); }); $(".chkSelect").bind("change", function (event, index) { if (!$(this).is(":checked")) { $("#chkSelectAll").prop("checked", false); } }); $("#txtfromRange,#txttoRange").keypress(function (e) { if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { return false; } }); $("#txtfromRange,#txttoRange").keyup(function (e) { var fromNum = parseInt($("#txtfromRange").val()); var toNum = parseInt($("#txttoRange").val()); ValidateRange(fromNum, toNum); }); 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; } 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); } } $("#btnApplyRange").click(function () { if($("#txtfromRange").val() != '' && $("#txttoRange").val() != '') selectRange(); });