Bootstrap Style CheckBoxList in ASP.Net using jQuery

Last Reply on Dec 04, 2015 06:20 AM By dharmendr

Posted on Dec 04, 2015 01:59 AM

I am using checkbox list in my .net project where onselectedIndexChanged event some tasks are performing.

I want to change the look and feel of checkbox list as per following link. but i am feeling difficulty to perform so please help me for css changing process.

 

<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="true" CssClass="test" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
                    <asp:ListItem></asp:ListItem>
                </asp:CheckBoxList>

and follow the following link for css support:

Please Follow this link

 

Posted on Dec 04, 2015 06:20 AM Modified on 5 months ago

Hi Prasunjeet,

I have created sample using below link.

https://github.com/flatlogic/awesome-bootstrap-checkbox

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css"
        rel="stylesheet" type="text/css" />
    <style type="text/css">
        .checkbox
        {
            padding-left: 20px;
        }
        .checkbox label
        {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding-left: 5px;
        }
        .checkbox label::before
        {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }
        .checkbox label::after
        {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }
        .checkbox input[type="checkbox"]
        {
            opacity: 0;
            z-index: 1;
        }
        .checkbox input[type="checkbox"]:checked + label::after
        {
            font-family: "FontAwesome";
            content: "\f00c";
        }
        
        .checkbox-primary input[type="checkbox"]:checked + label::before
        {
            background-color: #337ab7;
            border-color: #337ab7;
        }
        .checkbox-primary input[type="checkbox"]:checked + label::after
        {
            color: #fff;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="checkbox checkbox-primary">
        <table id="cblItem" class="styled">
            <tr>
                <td>
                    <input id="cblItem_0" type="checkbox" name="cblItem$0" checked="checked" value="Item A" /><label
                        for="cblItem_0">Item A</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="cblItem_1" type="checkbox" name="cblItem$1" value="Item B" /><label for="cblItem_1">Item
                        B</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input id="cblItem_2" type="checkbox" name="cblItem$2" value="Item C" /><label for="cblItem_2">Item
                        C</label>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>
Demo
 
Please use below HTML div if using asp.net control
 
<div class="checkbox checkbox-primary">
    <asp:CheckBoxList runat="server" ID="cblItem" CssClass="styled">
        <asp:ListItem Text="Item A" Selected="True" />
        <asp:ListItem Text="Item B" />
        <asp:ListItem Text="Item C" />
    </asp:CheckBoxList>
</div>