使用JavaScript或JQuery自動檢查asp：當按下按鈕時的複選框

我有一個功能，允許用戶在數據庫中搜索與他們輸入的字符串匹配的項目。例如，如果他們鍵入「超人「它會返回與超人相關的數據庫中的任何內容。在結果列表中的每個項目旁邊都有一個複選框。如果用戶選擇了一個複選框，他們可以按下「刪除」按鈕從列表中刪除該項目。我希望能夠通過按下「全選」按鈕來選擇所有的複選框。有時列表非常長，如果用戶想要刪除所有項目，單獨選擇和刪除每個項目將非常耗時。使用JavaScript或JQuery自動檢查asp：當按下按鈕時的複選框

該複選框是一個asp：TemplateField中的asp：複選框。 asp：TemplateField在一個asp：GridView中。這裏是複選框代碼：

<asp:TemplateField HeaderText="Select"> 
            <ItemTemplate> 
             <asp:CheckBox ID="uxSelectAdd"  runat="server" /> 
            </ItemTemplate>

對於「全選」按鈕，我使用的是常規輸入類型：

<input type="submit" value="Select All" id="uxSelectAll" />

下面是我使用的js文件的內容我的資源文件夾（我正在使用警報功能進行調試，出於某種原因，當頁面加載時彈出警告，而不是當我點擊按鈕時，單擊按鈕不會執行任何操作）：

$(document).ready(function() { 
    $('#uxSelectAll').click(function (e) { 
     $(searchCheckBoxSelector).prop('checked', true); 
     alert("helloooo"); 
    }); 
});

這是js在腳本標籤內的頂部包含在前端代碼：

<script type="text/javascript"> 
     var searchCheckBoxSelector = '#<%=uxSearchedComics.ClientID%>  input[id*="uxSelectAdd"]:checkbox'; 
    </script>

我知道，因爲它是在我們現在使用JavaScript的版本中刪除該.live是不行的，所以我嘗試改變.live改爲.click。這沒有用。我也試圖加入這個js到前端什麼，而不是已經在那裏了，只是爲了試驗看看，如果這個工程：

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#uxSelectAll').click(function() { 
       alert('hello world'); 
      }); 
     }); 
    </script>

出於某種原因，這也不能工作。我錯過了明顯的東西嗎？我想在我嘗試添加代碼來檢查所有複選框之前，至少得到警報才能工作，但連警報工作都沒有。我會感謝任何幫助或推動正確的方向。

下面是我使用的前端代碼的.js文件：

<script src="../../../../resources/js/ItemSlotEdit.js" type="text/javascript"></script> 
<script src="../../../../resources/js/plugins/jquery-1.11.0.js" type="text/javascript"></script>

來源

2015-03-02 HandleThatError

你有包含jquery Js文件嗎？ – 2015-03-02 17:38:07

是的，我編輯了我的問題以顯示內容。js文件我在ItemEdit.aspx文件的底部使用。 – HandleThatError 2015-03-02 17:49:42

如果您只在alert.ready函數中放置警報而沒有單擊事件，警報是否會出現？ – 2015-03-02 18:11:37

我想分享我使用的解決方案。我保持輸入元素完全相同，並且這個解決方案位於一個單獨的js文件中，我已將它包含到.aspx前端文件中。

$(document).ready(function() { 
    $('#body').on('click', 'input[type=submit]#uxSelectAll', function() { 
     $(this).toggleClass("checked"); 
     var isChecked = $(this).hasClass("checked"); 
     $('input[type=submit]#uxSelectAll').val(isChecked ? "Unselect All" : "Select All"); 
     $(this).prev().find(":checkbox").prop("checked", isChecked); 
     return false; 
    }); 
});

按鈕之前沒有工作的原因是因爲該按鈕位於頁面加載時不存在的div中。在用戶點擊搜索按鈕並且搜索結果進來後，div出現。搜索結果被填充到動態顯示的div中。所以，爲了訪問按鈕，你需要在選擇器中包含父容器。否則事件代表團不會通過。我使用了#body容器，因爲我只有一個Select All按鈕和一個複選框，所以它不會與任何內容發生衝突。 toggleClass函數在每次單擊時給出和刪除「checked」類之間交替進行，您可以使用.val屬性修改輸入元素的文本。

我希望這可以幫助別人。

來源

2015-03-05 15:47:54 HandleThatError

使用JavaScript或JQuery自動檢查asp：當按下按鈕時的複選框

回答

相關問題