带数据绑定的 RadioButtonList 切换按钮

Question

我有一个连接到本地 sqldb 的单选按钮列表。 table 有 2 个列 - cata 和 catab，radiobuttonlist 与 cata 绑定并且工作正常。我可以输入记录和查看记录。接下来我应用了 bootstrap toggle button css ，当我点击按钮时它像切换按钮一样工作，但是当我从一个记录切换到另一个记录时我没有看到任何变化。

<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

尝试以下 javascript 在单选按钮之间切换。

<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 Page_Load 事件上的单选按钮值：

Javascript 函数:

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');
            }
        }
    }

使用传递数据库值的 RegisterStartupScript 调用此函数。对于前。我在页面加载时传递值“2”。

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Show Windows" + new Random().Next().ToString(), "selectRadioValue('2');", true);
}

带数据绑定的 RadioButtonList 切换按钮

RadioButtonList toggle button with databind

asp.net

data-binding

radiobuttonlist

togglebutton

twitter-bootstrap