javascript - 单击 asp :button in the same row? 时如何将 gridview 复选框设置为选中

Question

我有一个带有一列 asp 按钮的 gridview，我使用 javascript 切换文本，如下所示:

function btnBuyToggle(objRef) 
{ 
    var row = objRef.parentNode.parentNode;
    var rowIndex = row.rowIndex;
    if (objRef.value == "ADD")
    {
        objRef.value = "REMOVE";
        $("#" + objRef.id).parent().parent().css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61");
    } 
    else 
    {
      objRef.value = "ADD";
    }
}

现在我添加了另一个隐藏复选框的 gridview 列，我想用它来将切换的按钮实例传递回另一个按钮单击事件后面的代码。因此，我需要做的是修改上面的脚本(JQuery 就可以)以在要切换的同一行上设置复选框(选中“添加”按钮文本值，并取消选中“删除”按钮文本值。

这是我的 GridView 字段:

<asp:TemplateField HeaderText="Prior <br /> Downld" HeaderStyle-ForeColor="White" > 
    <ItemTemplate >
       <asp:Button id="btnBuy" runat="server" OnClientClick="btnBuyToggle(this); return false;"
             Text="ADD" CssClass="buyButton" Visible="true" />
     </ItemTemplate>
    <HeaderStyle Width="7%" />
    <ItemStyle CssClass="sessionOrderDownloadItems" VerticalAlign="Middle" HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="0px" >
    <ItemTemplate>
        <asp:CheckBox Visible="False" Enabled="false" ID="buyCheckBoxHidden" runat="server"
             Checked='<%# Eval("SORD_SelectedForPurchaseFlag") %>' />
    </ItemTemplate>
    <HeaderStyle Width="0px" />
</asp:TemplateField>

谢谢你， 吉姆

这是我尝试的修复脚本:

      function btnBuyToggle(objRef) 
          { 
            var $btn = $("#" + objRef.id);

            if (objRef.value == "ADD")
            {
                objRef.value = "REMOVE";
                $btn.closest('.myClass').prop("checked", true);
                $btn.parent().parent().css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61");
            } else {
                objRef.value = "ADD";
                $btn.closest('.myClass').prop("checked", false);
                $btn.parent().parent().css("background-color", "#FFFFFF").css("color", "#191970").css("font-style", "normal");
            }
        }

以及我修改后的复选框标记:

<asp:TemplateField HeaderStyle-Width="0px" >
   <ItemTemplate>
     <asp:CheckBox style="display:block;" ID="buyCheckBoxHidden" runat="server" CssClass="myClass" Checked="false" />
   </ItemTemplate>
   <HeaderStyle Width="0px" />
</asp:TemplateField>

谢谢你， 吉姆

Answer 1

您的第一个问题是您将复选框设置为 visible="false"。当您执行此操作时，JavaScript 将看不到该复选框。您需要将其更改为 display:none。其次，您可以使用jquery closest()方法来获取最近的复选框。为了使这更容易，您可能应该向复选框添加一个类。找到复选框后，您可以使用 jquery prop()方法将选中的属性设置为 true 或 false。

HTML:

<asp:CheckBox runat="server" ID="buyCheckBoxHidden" Checked='<%# Eval("SORD_SelectedForPurchaseFlag") %>' style="display:none;" CssClass="class" />

Javascript:

function btnBuyToggle(objRef) 
{
    var $row = $(objRef).closest('tr');

    if (objRef.value == "ADD")
    {
        objRef.value = "REMOVE";
        $row.find('.myClass').prop("checked", true);
        // OR $row.find('input[type=checkbox]').prop("checked", true);
        $row.css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61");
    } else {
        objRef.value = "ADD";
        $row.find('.myClass').prop("checked", false);
        // OR $row.find('input[type=checkbox]').prop("checked", false);
        $row.css("background-color", "#FFFFFF").css("color", "#191970").css("font-style", "normal");
    }
}​

这是一个示例 jsfiddle .

编辑:

顺便说一下jquery prop()是更改 jquery 1.6 及更高版本的属性值的推荐方法。如果您使用的是早期版本的 jquery，则需要使用 attr()方法。

编辑:

因为 ASP.Net 控件似乎正在删除您的类。仅供引用，ASP.Net 控件具有预设外观，可以在您的 App_Themes 文件夹和您正在使用的主题中找到。在特定主题中，通常有一个 Default.skin 文件，它指定默认情况下控件上有哪些类。 ASP.Net 在创建复选框时可能会删除您的类。如果您不需要自己的类，则应该搜索 ASP.net 添加的类。