通過選擇另一個複選框來選擇所有複選框

Hello guys我開始使用jquery，當我嘗試通過單擊另一個複選框來選擇頁面中的所有複選框時遇到問題。通過選擇另一個複選框來選擇所有複選框

這是我的jQuery代碼：

$('.selecionarTodos').live('click', function() { 

     alert("test"); 

     var checkbox = $(this).children('td').children('[type="checkbox"]'); 

     $('.headerChkItem').each(function() { 

      if (checkbox.is(':checked')) { 
       $(this).css('background-color', ''); 
       checkbox.attr('checked', false); 
       $(this).children('td').children('[id*="hfSelecionada"]').val('false'); 
       qtdTotal = qtdTotal - parseFloat($(this).children('.quantidade').text().replace(',', '.')); 
      } 
      else { 
       $(this).css('background-color', '#e8f783'); 
       checkbox.attr('checked', true); 
       $(this).children('td').children('[id*="hfSelecionada"]').val('true'); 
       qtdTotal = qtdTotal + parseFloat($(this).children('.quantidade').text().replace(',', '.')); 
      } 

     }); 
    });

，這是我的客戶端代碼：

<asp:TemplateField HeaderText="Selecionar" ItemStyle-HorizontalAlign="Center"> 
    <HeaderTemplate> 
    <input type="checkbox" id="headerChkItem" cssclass="selecionarTodos" runat="server" /> 
    </HeaderTemplate> 
     <ItemTemplate> 
    <input type="checkbox" id="chkItem" disabled="disabled" cssclass="selecionado" runat="server" /> 
     </ItemTemplate> 
</asp:TemplateField>

PS：當我測試jQuery的「警報」沒有運行。在此先感謝。

來源

2013-04-22 guisantogui

您需要將其從id="headerChkItem"更改爲class="headerChkItem" 另外 - 是"cssclass"服務器端語言的一部分嗎？或者應該是"class"？

來源

2013-04-22 14:56:37

好的，我已經改變了cssclass，並且它已經被執行了，但是現在我仍然必須通過點擊這個複選框來選擇所有的itens，我必須循環所有的網格線嗎？ – guisantogui 2013-04-22 15:06:52

你可以在客戶端發佈HTML，而不是上面的服務器端代碼嗎？我看不到標籤在哪裏，等等。另外 - 你是否將ID改爲一個類？ – 2013-04-22 15:13:20

我猜測您的服務器代碼（從你的例子）看起來是這樣的：

<asp:ObjectDataSource runat="server" ID="DataSource" SelectMethod="GetData" TypeName="WebApplication1.Test"></asp:ObjectDataSource> 
<asp:GridView runat="server" ID="Grid" DataSourceID="DataSource"> 
    <Columns> 
     <asp:TemplateField HeaderText="Selecionar" ItemStyle-HorizontalAlign="Center"> 
      <HeaderTemplate> 
       <input type="checkbox" class="selecionarTodos headerChkItem" runat="server" /> 
      </HeaderTemplate> 
      <ItemTemplate> 
       <input type="checkbox" disabled="disabled" class="selecionado chkItem" runat="server" /> 
      </ItemTemplate> 
     </asp:TemplateField>    
    </Columns> 
</asp:GridView>

，爲此格，你需要這樣的：主要是

$('.selecionarTodos').on('click', function() { 
     var gridCheckboxes = $(this).parents('table').find('input:checkbox.chkItem'); 
     var qtdTotal = 0; 

     if ($(this).is(':checked')) { 
      $(this).css('background-color', ''); 
      gridCheckboxes.attr('checked', true); 
      qtdTotal = qtdTotal - parseFloat($(this).children('.quantidade').text().replace(',', '.')); 
     } else { 
      $(this).css('background-color', '#e8f783'); 
      gridCheckboxes.attr('checked', false); 
      qtdTotal = qtdTotal + parseFloat($(this).children('.quantidade').text().replace(',', '.')); 
     } 
    });

你的錯誤：

使用cssclass屬性時類是正確的
錯誤地選擇了表格中的複選框

我還是不明白你爲什麼使用每個循環的所有標題複選框。我發佈的代碼只是位於標題複選框，當您單擊它時，將根據標題複選框狀態選中或取消選中網格中的所有其他複選框。

來源

2013-04-22 15:38:20 milunka

通過選擇另一個複選框來選擇所有複選框

回答

相關問題