Geek Answers Handbook

ASP.NET WebForms Validating all checkboxes in a GridView using jQuery v1.9.0 does not work

I have a problem with my application regarding jQuery. I tried the sample code ( http://aspnet.4guysfromrolla.com/articles/120810-1.aspx ) to use the header control panel to check / clear all rows inside the GridView. The sample code works with jQuery v1.4.4, but does not work with the latest version of jQuery v1.9.0.

Here is the code.

<script type="text/javascript"> var allCheckBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkAll"]:checkbox'; var checkBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkSelected"]:checkbox'; function ToggleCheckUncheckAllOptionAsNeeded() { var totalCheckboxes = $(checkBoxSelector), checkedCheckboxes = totalCheckboxes.filter(":checked"), noCheckboxesAreChecked = (checkedCheckboxes.length === 0), allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length); $(allCheckBoxSelector).attr('checked', allCheckboxesAreChecked); } $(document).ready(function () { $(allCheckBoxSelector).live('click', function () { $(checkBoxSelector).attr('checked', $(this).is(':checked')); ToggleCheckUncheckAllOptionAsNeeded(); }); $(checkBoxSelector).live('click', ToggleCheckUncheckAllOptionAsNeeded); ToggleCheckUncheckAllOptionAsNeeded(); }); </script>

With jQuery v1.4.4, everything works fine. Using jQuery v1.9.0 for each page load, I get "The object does not support this property or method: .live". If I use the syntax:

 $(allCheckBoxSelector).click(function () {...

instead of the above, I avoid the error, but the header flag only works once. If I click on it again, nothing will be added.

I also tried the .on syntax:

 $(allCheckBoxSelector).on('click', function () {...

but it doesn’t work either.

I would like to know if this issue is caused by a change or error in jQuery v1.9.0.

+4
source share
3 answers

jQuery live should now be replaced by. If the code worked before it should work only after you change the live mode to.

I got to the bottom of the problem: I had to use .prop instead of .attr . I also made some changes to the code.

Here's a working demo on JS Bin: http://jsbin.com/egopar/4/edit

Here's the working code for jQuery 1.9:

  $(document).ready(function () { var allCheckBoxSelector = $('#chkAll'); var checkBoxSelector = $('input:checkbox:not(#chkAll)'); function ToggleCheckUncheckAllOptionAsNeeded() { var totalCheckboxes = $(checkBoxSelector), checkedCheckboxes = totalCheckboxes.filter(":checked"), noCheckboxesAreChecked = (checkedCheckboxes.length === 0), allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length); //console.log(allCheckboxesAreChecked); $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked); } $(allCheckBoxSelector).on('click', function () { $(checkBoxSelector).prop('checked', $(this).is(':checked')); ToggleCheckUncheckAllOptionAsNeeded(); }); $(checkBoxSelector).on('click', function () { ToggleCheckUncheckAllOptionAsNeeded(); }); });
+3
source

If you are not using jQuery anywhere else on your page, you can use very simple javascript to do this. There are many ways to do this, but it works for me and can be tied to buttons, links, etc. Checkid is the client identifier and selects true or false.

 function checktoggle(checkid,select){ var check=document.getElementById(checkid); var numinput=check.getElementsByTagName('input'); for (i=0; i<numinput.length; i++){ numinput[i].checked=select; } }
0
source

Solved!

Thanks to Leniel Macaferi's suggestions, I used the .on and .prop methods instead of .live and .attr , but I am making another implementation of the script that finally works with jQuery v1.9.0 in my application.

 <script type="text/javascript"> var allCheckBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkAll"]:checkbox'; var checkBoxSelector = '#<%=gvFileList.ClientID%> input[id*="chkSelected"]:checkbox'; function ToggleCheckUncheckAllOptionAsNeeded() { var totalCheckboxes = $(checkBoxSelector), checkedCheckboxes = totalCheckboxes.filter(":checked"), noCheckboxesAreChecked = (checkedCheckboxes.length === 0), allCheckboxesAreChecked = (totalCheckboxes.length === checkedCheckboxes.length); $(allCheckBoxSelector).prop('checked', allCheckboxesAreChecked); } $(document).ready(function() { $(allCheckBoxSelector).on('click', function() { $(checkBoxSelector).prop('checked', $(this).is(':checked')); ToggleCheckUncheckAllOptionAsNeeded(); }); $(checkBoxSelector).on('click', ToggleCheckUncheckAllOptionAsNeeded); ToggleCheckUncheckAllOptionAsNeeded(); }); </script>
0
source

More articles:


All Articles