选定的gridview行没有改变，而是所有行都在改变答案

【问题标题】：selected rows of gridview not changing, instead all rows are changing选定的gridview行没有改变，而是所有行都在改变
【发布时间】：2013-10-10 18:29:25
【问题描述】：

我有一个包含复选框和文本框的网格视图。我想要的是当特定行的复选框被选中时，该行的文本框将变成下拉菜单。我使用了.show() 和.hide() 功能来显示下拉菜单和隐藏文本框。

这是gridview的复选框：

     <ItemTemplate>      <div style="text-align: center;">
           <asp:HiddenField ID="hdn_id2" runat="server" Value='<%#Eval("Id") %>' />

                    <asp:CheckBox ID="NewCheckBoxImage" CssClass="NewCheckBoxImage()"  onClick="NewCheckBoxImage();" runat="server" /></div>
                </ItemTemplate>

这是javascript的代码：

   function NewCheckBoxImage() {

        var flag = false;

        $('.gridAssigned input[type="checkbox"]').each(function () {


            if ($(this).is(':checked')) {
                flag = true;
            }
        });
        if (flag) {

            $('.NewBtnAssign').show();
            $('.TextBoxCompany').hide();
            $('.TextBoxBrand').hide();
            $('.DDCompany').show();
            $('.DDBrand').show();

        }
        else {
            $('.NewBtnAssign').hide();
            $('.TextBoxCompany').show();
            $('.TextBoxBrand').show();
            $('.DDCompany').hide();
            $('.DDBrand').hide();
        }
    }

TextBoxCompany、TextBoxBrand 是文本框，DDCompany、DDBrand 是下拉菜单。选中任何复选框时，所有文本框都将被隐藏，所有下拉菜单都会显示。我希望选中复选框的行，只显示那些行的下拉列表。

【问题讨论】：

您正在按类选择元素，即.NewBtnAssign 这将找到具有该类的每个元素并显示它。将您的选择器更改为更具体的内容。
OT：一个附带问题：为什么要发布一个 asp.net 标签而不是 renderend HTML 输出？我只是想了解如果客户端出现问题，为什么用户还会发布服务器端代码？

标签： javascript jquery asp.net

【解决方案1】：

您正在按类选择元素，这将返回的不仅仅是当前行的元素。试试下面的功能：

   function NewCheckBoxImage() {
        $('.gridAssigned input[type="checkbox"]').each(function () {
            //Find the current row
            var row = $(this).parent().parent();

            if ($(this).is(':checked')) {
                //Checkbox is Checked

                $(row).find('.NewBtnAssign').show();
                $(row).find('.TextBoxCompany').hide();
                $(row).find('.TextBoxBrand').hide();
                $(row).find('.DDCompany').show();
                $(row).find('.DDBrand').show();
            } else {
                $(row).find('.NewBtnAssign').hide();
                $(row).find('.TextBoxCompany').show();
                $(row).find('.TextBoxBrand').show();
                $(row).find('.DDCompany').hide();
                $(row).find('.DDBrand').hide();
            }
        });
    }

它的作用是每次单击复选框时，它都会遍历项目列表并检查它是否被选中。如果选中该项目，它将使用 $(this).parent().parent(); 获取当前 HTML 行，然后它将使用该行查找该行中存在的您需要的元素并相应地显示/隐藏它们。

【讨论】：

【解决方案2】：

你能试试这个并告诉我吗？我不确定它是否会起作用，但可能

function NewCheckBoxImage() {

$('.gridAssigned input[type="checkbox"]').each(function () {
    var tr = $(this).closest('tr');
    if ($(this).is(':checked')) {
        tr.find('.NewBtnAssign').show();
        tr.find('.TextBoxCompany').hide();
        tr.find('.TextBoxBrand').hide();
        tr.find('.DDCompany').show();
        tr.find('.DDBrand').show();
    }
    else {
        tr.find('.NewBtnAssign').hide();
        tr.find('.TextBoxCompany').show();
        tr.find('.TextBoxBrand').show();
        tr.find('.DDCompany').hide();
        tr.find('.DDBrand').hide();
    }
    });

}

【讨论】：

@user2829939 我可能打错字了，基本上和你接受的一样。唯一的区别是$(this).parent().parent(); 和$(this).closest('tr');。我建议使用closest()，因为如果您的复选框位于另一个标签（如<span></span>）内，则第一种方法将不起作用。阅读更多相关信息here