Question

这是我解决单选按钮方案问题的最后一次尝试。我无法弄清楚如何只选择一个按钮。（顺便说一句，我不能使用RadioButtonList，因为它不允许在其块内部使用html代码，因此它不适合我）。

我有一个在ListView中选择的图片和单选按钮列表，如下所示：

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource_BGlist">
        <ItemTemplate>                
            <input id="Radio1" name="BG_list" type="radio" runat="server" value='<%# Eval("BG_fileName") %>'/>
            <img alt="" style="width:150px" src="/Images/Editors/BG/<%# Eval("BG_fileName") %>">                  
        </ItemTemplate>

    </asp:ListView>

不幸的是，ListView机制为场景后面的每个单选按钮分配了一个不同的名称，这意味着我可以选择多个单选按钮。我希望只能选择一个按钮。所以我添加了以下脚本：

<script type="text/javascript">
    var inputElements = document.getElementsByTagName("input");
    for (var inputName in inputElements) {
        var input = inputElements[inputName];
        if (input.type === "radio") {
            input.name = "BG_list";
        }
    }

现在我可以选择一个按钮，但它在代码隐藏中创建了另一个问题。所选按钮的值始终为空。为什么？任何人都可以看到错误吗？

代码背后

foreach (ListViewItem itemRow in this.ListView1.Items)
                {
                    //RadioButton radioBtn = (RadioButton)itemRow.FindControl("Radio1");
                    var radioBtn = (HtmlInputRadioButton)itemRow.FindControl("Radio1");

                    if (radioBtn.Checked)
                    {
                       // Do Stuff
                        //Response.Write(radioBtn.Value);                       
                    }
                }

Answer 1

您可以使用jquery取消选中除被点击的按钮之外的所有radio按钮，请参阅下面的jquery：

$(document).ready(function (){
    // bind change event for radio button
    $('input[type=radio]').change(function(){
        // remove checked attribute for all radio button except the current one.
        $('input[type=radio]').not(this).removeAttr('checked');
    });
});

<强> Demo

添加jQuery后，所选单选按钮的值为空

1 个答案: