ASP.NET CheckBoxList Operations with jQuery

jQuery.

Let’s have following aspx code:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">

</asp:CheckBoxList>

<input type="button" value="OK" id="demo" /> 

On server side:

Dictionary<int,string>  dictItems = new Dictionary<int,string>();

 dictItems.Add(1, "Item-1");

 dictItems.Add(2, "Item-2");

 dictItems.Add(3, "Item-3");

 dictItems.Add(4, "Item-4");

 dictItems.Add(5, "Item-5");

 CheckBoxList1.DataSource = dictItems;

 CheckBoxList1.DataTextField = "Value";

 CheckBoxList1.DataValueField = "Key";

 CheckBoxList1.DataBind();

1. Get Value of Selected Items:

//Get value of selected items

$("#demo").click(function () {     

    var selectedValues = [];

    $("[id*=CheckBoxList1] input:checked").each(function () {          

        selectedValues.push($(this).val());

    });

    if (selectedValues.length>0) {

        alert("Selected Value(s): " + selectedValues);

    } else {

        alert("No item has been selected.");

    }

});




2. Get Index of selected items:

//Get index of selected items

   $("#demo").click(function () {

       var $ctrls = $("[id*=CheckBoxList1] input:checkbox");

       $("[id*=CheckBoxList1] input:checked").each(function () {

          alert($ctrls.index($(this)));

       });      

   });




It will display 0 based index of selected items. Suppose I select Item-1,Item-3,Item-4 then It’ll give output 0,2,3 in alert boxes.

3. Get Text of Selected Items:

//Get text of selected items

 $("#demo").click(function () {      

     $("[id*=CheckBoxList1] input:checked").each(function () {

         alert($(this).next().html());

     });

 });




As you’ve seen, Text is placed in label control(next of checkbox) in rendered HTML. So,$(this).next().html() is used to get text.

4. Check/Uncheck All Checkboxes:

$("[id*=CheckBoxList1] input:checkbox").prop('checked',true); //To check all

$("[id*=CheckBoxList1] input:checkbox").prop('checked',false);// To uncheck all




Note: For jQuery 1.6+,use prop and for older version use attr.

Read Also: jQuery .attr() vs .prop()

5. Check Items By Index:

//Check Items by index

   var selIndex = [0, 2, 3];

   for (var i = 0; i < selIndex.length; i++) {

       $("[id*=CheckBoxList1] input:checkbox").eq(selIndex[i]).prop('checked', true);

   }




Similarly, you can uncheck items by setting false in prop.

6. Check Items By Value:

//Check Items by value

   var selValue = [1, 2, 4];

   var $ctrls = $("[id*=CheckBoxList1]");

   for (var i = 0; i < selValue.length; i++) {

       $ctrls.find('input:checkbox[value=' + selValue[i] + ']').prop('checked', true);

   }




In above code, checkbox is selected if value exist in selValue array.

7. Check Items By Text:

//Check Items by Text

    var selText = ['Item-1','Item-3'];

    var $ctrls = $("[id*=CheckBoxList1]");

    for (var i = 0; i < selText.length; i++) {

        $ctrls.find('label:contains("' + selText[i] + '")').prev().prop('checked', true);

    }




In this Label text is compared and if text exists then corresponding checkbox is checked. The above code will select Item-1 and Item-3.

8. Max Selection Limit:

The following code limits the number of checkboxes a user can select simultaneously

$("[id*=CheckBoxList1] input:checkbox").change(function () {

          var maxSelection = 3;

          if ($("[id*=CheckBoxList1] input:checkbox:checked").length > maxSelection) {

              $(this).prop("checked", false);

              alert("Please select a maximum of " + maxSelection + " items.");

          }

      })

reff-http://techbrij.com/checkboxlist-jquery-asp-net-operations




Get Table columns names, schema, datatype and more using sql query

select *

 from INFORMATION_SCHEMA.COLUMNS where TABLE_NAME='Table Name here'

//For Particular

select '['+COLUMN_NAME+']',DATA_TYPE,

case when CONVERT(varchar, CHARACTER_MAXIMUM_LENGTH)>0 then CHARACTER_MAXIMUM_LENGTH else '' end as mm,case when IS_NULLABLE='Yes' then 'NULL,' else 'NOT NULL,' end as tt

 from INFORMATION_SCHEMA.COLUMNS where TABLE_NAME=' Table Name here'

Get table or gridview textbox value using jquery

//HTML

<table id="GVAnganwadi">

    <tr>

        <td>

            <input type="text" class="firstName" value="foo1">

        </td>

                 <td>

            <input type="text" class="lastName" value="bar1">

        </td>

    </tr>

    <tr>

        <td>

            <input type="text" class="firstName" value="foo2">

        </td>

                <td>

            <input type="text" class="lastName" value="bar2">

        </td>

    </tr>

    <tr>

        <td>

            <input type="text" class="firstName" value="foo3">

        </td>

                 <td>

            <input type="text" class="lastName" value="bar3">

        </td>

    </tr>

    <tr>

        <td>

            <input type="text" class="firstName" value="foo4">

        </td>

                 <td>

            <input type="text" class="lastName" value="bar4">

        </td>

    </tr>

</table>

//Query

$(function () {

        $("[id*=GVAnganwadi] tr:has(td)").each(function () {

            var tt = $(this).children('td:eq(1)');

            var mm = tt.children(0).val()

            alert(tt.children(0).val());

            tt.children(0).css("background-color", "red");

        });

    });

//table

Export table inside div using jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>Test Export</title>

        <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript" language="javascript"> </script>

        <style type="text/css">

            table

            {

                border: 1px solid black;

                border-collapse: collapse;

                border-spacing: 0;

                font-family: Calibri;

                font-size: 14px;

                height: 120px;

                width: 400px;

            }

       

            th

            {

                border: 1px solid black;

                padding: 5px;

                background-color: grey;

                color: white;

            }

            td

            {

                text-align: center;

                border: 1px solid black;

            }

        </style>

    </head>

    <body>

        <div>

            <div id="dvData">

                <table>

                    <tbody>

                        <tr>

                            <th>

                                Column One

                            </th>

                            <th>

                                Column Two

                            </th>

                            <th>

                                Column Three

                            </th>

                        </tr>

                        <tr>

                            <td>

                                row1 Col1

                            </td>

                            <td>

                                row1 Col2

                            </td>

                            <td>

                                row1 Col3

                            </td>

                        </tr>

                        <tr>

                            <td>

                                row2 Col1

                            </td>

                            <td>

                                row2 Col2

                            </td>

                            <td>

                                row2 Col3

                            </td>

                        </tr>

                        <tr>

                            <td>

                                row3 Col1

                            </td>

                            <td>

                                row3 Col2

                            </td>

                            <td>

                                row3 Col3

                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

            <br/>

            <input type="button" id="btnExport" value="Export Table data into Excel" />

        </div>

    </body>

</html>

<script type="text/javascript" language="javascript">

    $("#btnExport").click(function (e) {

        //first method

       // window.open('data:application/vnd.ms-excel,' + $('#dvData').html());

       // e.preventDefault();

        //second method with css or style

        window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html()));

        e.preventDefault();

    });

</script>

 //page

// Result

select Nth salary from employee table using sql query with top query

SELECT MAX(EmpSalary) as 'EmpSalary' from tblEmployeeDetails

where Salary NOT IN

(

SELECT TOP n-1 (EmpSalary) from tblEmployeeDetails ORDER BY EmpSalary Desc

) 

// 2nd

SELECT MAX(EmpSalary) as 'EmpSalary' from tblEmployeeDetails

where Salary NOT IN

(

SELECT TOP 1 (EmpSalary) from tblEmployeeDetails ORDER BY EmpSalary Desc

) 

Result-14000

// 3nd

SELECT MAX(EmpSalary) as 'EmpSalary' from tblEmployeeDetails

where Salary NOT IN

(

SELECT TOP 2 (EmpSalary) from tblEmployeeDetails ORDER BY EmpSalary Desc

)

 Result-13000