取消选中一个单选按钮，以防使用 jQuery 在 ListView 中选中另一个单选按钮答案

【问题标题】：Uncheck a radio button in case another one is checked in a ListView using jQuery取消选中一个单选按钮，以防使用 jQuery 在 ListView 中选中另一个单选按钮
【发布时间】：2015-06-18 19:34:29
【问题描述】：

我有一个由 ListView 动态生成的单选按钮列表。每个单选按钮引用不同图像的 ID。

现在，我希望用户能够单击图像，而不是检查单选按钮，并自动检查单选按钮。到目前为止，一切都很好。我已经到了那个阶段。

但是我希望用户只检查一个图像，这意味着如果单击新图像，则必须取消选中先前图像的单选按钮。我尝试了很多方法，但都没有奏效。这是我的脚本：

$(document).ready(function () {
        $(function () {
           $(".SmallSquarePhoto").click(function () {
           var RadioValue = $(this).attr("myAttribute"); //Get the value of myAttribute
           $('input[myAttribute=' + RadioValue + ']').attr('checked', 'checked'); //Check the radiobutton that corresponds to the image that was clicked
           $("#SmallSquarePhoto" + RadioValue).css("border-color", "#51cf25"); //Create a green border around the selected image
           $('[id^="SmallSquarePhoto"]:not(#SmallSquarePhoto' + RadioValue + ')').css("border-color", "white"); //Remove the green border from the previous image that was selected                    
           $("#<%=FormView3.FindControl("UpdateButton").ClientID %>").removeAttr('disabled'); //Enable the Change button in case an image is clicked
// SO FAR SO GOOD
           //Here I want to uncheck the radio buttons that don't correspond to the latest clicked image. How?
           });
        });
    });


<itemtemplate>
<div id="SmallSquarePhoto<%# Eval("ID_BG") %>" class="SmallSquarePhoto" style="cursor:pointer; border-width: 4px; background-image: url(/Members/images/background/<%# Eval("BG_fileName") %>)" myAttribute='<%# Eval("ID_BG") %>' >
<input id="Radio1" name="BG_list" type="radio" runat="server" myAttribute='<%# Eval("ID_BG") %>' value='<%# Eval("BG_fileName") %>' />
</div>
</itemtemplate>

这是 HTML 输出

<div id="SmallSquarePhoto269" class="SmallSquarePhoto" style="background-image: url(150301-110930-1.jpg               )" myAttribute='269' >
<input value="150301-110930-1.jpg               " name="ctl00$ContentPlaceHolder1$ListView1$ctrl0$BG_list" type="radio" id="ContentPlaceHolder1_ListView1_Radio1_0" myAttribute="269" />
</div>

<div id="SmallSquarePhoto266" class="SmallSquarePhoto" style="background-image: url(150301-110104-1.jpg               )" myAttribute='266' >
<input value="150301-110104-1.jpg               " name="ctl00$ContentPlaceHolder1$ListView1$ctrl1$BG_list" type="radio" id="ContentPlaceHolder1_ListView1_Radio1_1"  myAttribute="266" />
</div>

更新解决方案是以下脚本：

$(document).ready(function () {

        $(function () {
            $(".SmallSquarePhoto").click(function () {
                var RadioValue = $(this).attr("myAttribute"); //Get the value of myAttribute
                $('[id^="SmallSquarePhoto"]:not(#SmallSquarePhoto' + RadioValue + ')').css("border-color", "white"); //Remove the green border from the previous image that was selected                    
                $("#<%=FormView3.FindControl("UpdateButton").ClientID %>").removeAttr('disabled'); //Enable the Change button in case an image is clicked
                $('input[type=radio]').prop('checked', false); //NEW
                $('input[myAttribute=' + RadioValue + ']').prop('checked', 'checked'); //NEW
                $("#SmallSquarePhoto" + RadioValue).css("border-color", "#51cf25"); //Create a green border around the selected image
           });
    });
   });

【问题讨论】：

注意：对于 jQuery 问题，输出页面 HTML 的副本（例如从浏览器保存的）比 ASP.Net 源代码更可取。使模拟示例变得更加容易:)
我还注意到您的模板控件上有runat="server"。这是故意的吗？
是的。没有 runat="server" 我无法获得运行 jQuery 脚本所需的值
你能显示输出的 HTML 吗？这将使模型变得容易。脑补 ASP.Net 并不好玩 :)
它现在基于@Akash Chavda 解决方案工作

标签： jquery asp.net radio-button

【解决方案1】：

你可以这样试试

$(document).ready(function () {

        $(function () {
               $(".SmallSquarePhoto").click(function () {
               var RadioValue = $(this).attr("myAttribute"); //Get the value of myAttribute
               $('[id^="SmallSquarePhoto"]:not(#SmallSquarePhoto' + RadioValue + ')').css("border-color", "white"); //Remove the green border from the previous image that was selected                    
               $("#<%=FormView3.FindControl("UpdateButton").ClientID %>").removeAttr('disabled'); //Enable the Change button in case an image is clicked
               $('[id^="SmallSquarePhoto"]').prop('checked', false);
               $('input[myAttribute=' + RadioValue + ']').prop('checked', 'checked'); //Check the radiobutton that corresponds to the image that was clicked
               $("#SmallSquarePhoto" + RadioValue).css("border-color", "#51cf25"); //Create a green border around the selected image
               });
            });
        });


    <itemtemplate>
    <div id="SmallSquarePhoto<%# Eval("ID_BG") %>" class="SmallSquarePhoto" style="cursor:pointer; border-width: 4px; background-image: url(/Members/images/background/<%# Eval("BG_fileName") %>)" myAttribute='<%# Eval("ID_BG") %>' >
    <input id="Radio1" name="BG_list" type="radio" runat="server" myAttribute='<%# Eval("ID_BG") %>' value='<%# Eval("BG_fileName") %>' />
    </div>
    </itemtemplate>

我不确定，但我认为这对你有帮助。

【讨论】：