Implement Bootstrap RadioButton group with checked changed event using jQuery iCheck plugin in ASP.Net

Last Reply on Oct 09, 2017 12:24 AM By AnandM

Posted on Oct 06, 2017 03:45 AM

Hiii ,

I want to implement Bootstrap radio Button Group in asp.net with checkbox/Radio Button with its checkChanged/Selected Event.

On that basis i want to do some operation from code behind.

Posted on Oct 09, 2017 12:24 AM

Hi Amol111,

I have created a sample which full fill your requirement you need to modify the code according to your need.

I have taken reference from below link.

iCheck

Refer below sample code.

HTML

<div>
    <asp:RadioButtonList ID="rblResult" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="RadioButtonChanged"
        AutoPostBack="true">
        <asp:ListItem Text="Pass" />
        <asp:ListItem Text="Fail" />
    </asp:RadioButtonList>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('[id*=rblResult]').iCheck({
                radioClass: 'iradio_square-red',
                increaseArea: '20%'
            });
            $('[id*=rblResult]').each(function () {
                var $element = $(this);
                $element.addClass('icheck');
            });
            $('.icheck').each(function () {
                $onclick = $(this).attr("onclick");
                $iCheckName = $(this).attr("name");
                $buttonTrigger = 'input[name="' + $iCheckName + '"';
                var $this = $(this);
                if ($onclick != undefined) {
                    if ($onclick.length > 0) {
                        $($buttonTrigger).on('ifChecked', function (event) {
                            $(this).trigger("click");
                        });
                    }
                }
            });
        });            
    </script>
</div>

C#

protected void RadioButtonChanged(object sender, EventArgs e)
{
    string selectedItem = (sender as RadioButtonList).SelectedItem.Text;
    string script = "alert('" + selectedItem + "')";
    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", script, true);
}

VB.Net

Protected Sub RadioButtonChanged(sender As Object, e As EventArgs)
	Dim selectedItem As String = TryCast(sender, RadioButtonList).SelectedItem.Text
	Dim script As String = (Convert.ToString("alert('") & selectedItem) + "')"
	ClientScript.RegisterClientScriptBlock(Me.[GetType](), "alert", script, True)
End Sub

Screenshot