選定的gridview行沒有更改，而是所有行都在更改

Question

我有一個包括復選框和文本框的gridview。 我要的是選中特定行的復選框后，該行的文本框將變為下拉菜單。 我已經使用.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是下拉列表。 選中任何復選框后，“所有文本框”都會被隱藏，並且所有下拉列表都會顯示。 我希望選中復選框的行，僅顯示那些行的下拉列表。

Answer 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行$(this).parent().parent(); 然后它將使用該行查找該行中存在的所需元素，並相應地顯示/隱藏它們。

Answer 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();
    }
    });

}