RadioButtonList toggle button with databind - asp.net

Question

I have a radio button list connect to a local sqldb. The table has 2 cols - cata and catab, the radiobuttonlist is binded with cata and it works properly. I can enter records and view records. Next I applied bootstrap toggle button css , when I click buttons it works like toggle button, but I don't see any change when I change from record to record.
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatLayout="Flow"
RepeatDirection="Horizontal" CssClass="btn-group" data-toggle="buttons"
SelectedValue='<%# Bind("cata") %>'>
<asp:ListItem class="btn btn-primary" Value="1"></asp:ListItem>
<asp:ListItem class="btn btn-primary" Value="2"></asp:ListItem>
<asp:ListItem class="btn btn-primary" Value="3"></asp:ListItem>
<asp:ListItem class="btn btn-primary active" Value="4" Selected="True"></asp:ListItem>
</asp:RadioButtonList>
![screen shot][1]

Answer 1

Try below javascript to make toggling between your radio buttons.
<script>
$(document).ready(function () {
$('.btn-primary').click(function () {
$(this).addClass('active');
var allspan = $('#<%= RadioButtonList1.ClientID %>').find('span');
for (var i = 0; i < allspan.length; i++) {
if (allspan[i] == this) {
$(this).find('input[type="radio"]').prop('checked', true);
alert($(this).find('input[type="radio"]').val());
}
else {
$(allspan[i]).removeClass('active');
}
}
});
});
</script>
Select radio button value on Page_Load event:
Javascript Function:
function selectRadioValue(value)
{
var allspan = $('#<%= RadioButtonList1.ClientID %>').find('span');
for (var i = 0; i < allspan.length; i++) {
var objInnerRdo = $(allspan[i]).find('input[type="radio"]');
alert(objInnerRdo.val());
if (objInnerRdo.val() == value)
{
$(allspan[i]).addClass('active');
$(allspan[i]).find('input[type="radio"]').prop('checked', true);
}
else {
$(allspan[i]).removeClass('active');
}
}
}
Call this function using RegisterStartupScript where you passing database value. For Ex. I'm passing value "2" on page load.
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Show Windows" + new Random().Next().ToString(), "selectRadioValue('2');", true);
}