how to add ChechBox in DataList using jQuery

Hi  rajeshR2

I have created sample code which fullfill requirement.

HTML

<div>
    <asp:TextBox ID="txtId" Width="300px" runat="server" />
    <div id="divName" runat="server" style="display: none">
        <asp:Repeater ID="dlCustomers" runat="server">
            <HeaderTemplate>
                <table cellspacing="0" rules="all" border="1">
                    <th>
                        To
                    </th>
                    <th>
                        CC
                    </th>
                    <th>
                    </th>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:CheckBox ID="chkwater" onclick="checkedItem(this,'W')" runat="server" />
                    </td>
                    <td>
                        <asp:CheckBox ID="chkMaintaine" onclick="checkedItem(this,'M')" runat="server" />
                    </td>
                    <td>
                        <asp:Label ID="lblName" Text='<%#Eval("Name") %>' runat="server" />
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
    </div>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var count = 0;
            $('[Id*=txtId]').on('click', function () {
                if (count == 0) {
                    $('[Id*=divName]').show();
                    count++;
                }
                else {
                    $('[Id*=divName]').hide();
                    count = 0;
                }
            });
        });
        function checkedItem(checkeditem, r) {
            //   var checkedCheckboxes = $("#<%=dlCustomers.ClientID%> input[id*='chkMaintaine']:checkbox:checked").size()
            if (r == 'W') {
                if ($(checkeditem).closest('tr').find("[id*=chkwater]").attr('checked')) {
                    var item = $(checkeditem).closest('tr').find("span[id*=lblName]").text();
                    var values = $('[id*=txtId]').val().split(',');
                    values = values.filter(function (ele) {
                        return ele != item
                    });
                    $('[id*=txtId]').val(values);
                }
                $(checkeditem).closest('tr').find("[id*=chkMaintaine]").attr("checked", false);
                var isChecked = $(checkeditem).is(":checked");
                if (isChecked) {
                    var items = [];
                    var item = $(checkeditem).closest('tr').find("span[id*=lblName]").text();
                    items.push($('[id*=txtId]').val());
                    items.push(item);
                    if ($('[id*=txtId]').val() != "") {
                        $('[id*=txtId]').val(items.join(','));
                    } else {
                        $('[id*=txtId]').val(item);
                    }
                }
                else {

                    var item = $(checkeditem).closest('tr').find("span[id*=lblName]").text();
                    var values = $('[id*=txtId]').val().split(',');
                    values = values.filter(function (ele) {
                        return ele != item
                    });
                    $('[id*=txtId]').val(values);
                }
            }
            else {
                if ($(checkeditem).closest('tr').find("[id*=chkMaintaine]").attr('checked')) {
                    var item = $(checkeditem).closest('tr').find("span[id*=lblName]").text();
                    var values = $('[id*=txtId]').val().split(',');
                    values = values.filter(function (ele) {
                        return ele != item
                    });
                    $('[id*=txtId]').val(values);
                }
                $(checkeditem).closest('tr').find("[id*=chkwater]").attr("checked", false);
                var isChecked = $(checkeditem).is(":checked");
                if (isChecked) {
                    var itemss = [];
                    var item = $(checkeditem).closest('tr').find("span[id*=lblName]").text();
                    itemss.push($('[id*=txtId]').val());
                    itemss.push(item);
                    if ($('[id*=txtId]').val() != "") {
                        $('[id*=txtId]').val(itemss.join(','));
                    } else {
                        $('[id*=txtId]').val(item);
                    }
                }
                else {
                    var item = $(checkeditem).closest('tr').find("span[id*=lblName]").text();
                    var values = $('[id*=txtId]').val().split(',')
                    values = values.filter(function (ele) {
                        return ele != item
                    });
                    $('[id*=txtId]').val(values);
                }
            }
        }
    </script>
</div>

C#

{
    DataTable dt = new DataTable();
    dt.Columns.Add("Name", typeof(string));
    dt.Rows.Add("peter");
    dt.Rows.Add("John");
    dt.Rows.Add("John1");
    dt.Rows.Add("John2");
    dt.Rows.Add("John3");
    dt.Rows.Add("John4");
    dt.Rows.Add("John5");
    dt.Rows.Add("John6");
    dlCustomers.DataSource = dt;
    dlCustomers.DataBind();
}

Screenshot

I hope works for you.