Whenever I need to use jquery with checkbox different functionality I always search for different sites to get my answer so I decided to write a small article to keep all the jquery functionality with checkbox at a single place, so trying to keep everything here.
To get a checkbox on a page use
For better performance in modern browsers [type="checkbox"]
To Check and Un-Check by using class name and Id
jQuery 1.6+
$('.classname').prop('checked', true);
$('.classname').prop('checked', false);
$('#checkboxid').prop('checked', true);
$('#checkboxid').prop('checked', false);
jQuery 1.5 and below
$('.classname').attr('checked', 'checked');
$('.classname').removeAttr('checked');
$('#checkboxid').attr('checked', 'checked');
$('#checkboxid').removeAttr('checked');
Check the checkbox is Checked or Un-Checked
$('.classname').is(':checked');
$('#checkboxid').is(':checked');
Checkbox Click
$('#checkboxid').click(function() {
if ($(this).is(':checked'))
alert('Checked');
else
alert('Not Checked');
});
If you are using Update panel then after asynchronous postback it will not work, so to fix it use live like this
$('#checkboxid').live("click", function() {
if ($(this).is(':checked'))
alert('Checked');
else
alert('Not Checked');
});
Total checked checkbox on page
var TotalChecked = $("input:checked").length;
Let me know if I am missing anything here.
|
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
| By Ali Adravi On 16 Nov, 12 Viewed: 914 |
Add, enable, disable dates to datepicker control is really more than easy but I found most beginners struggle with it to add datepicker with a control or to enable and disable dates for a particular condition. In this article we will learn how to add datepicker without any calendar icon as well as... By Ali Adravi On 15 Mar 2015 Viewed: 10,389
We can use JavaScript to get parent element or jQuery to get parent element but which one would be best for you is up to your need and familiarity with JavaScript and jQuery. In this article we will take different conditions and examples to show how jquery finds parent element and same case with... By Hamden On 06 Apr 2013 Viewed: 10,708
Angularjs jquery calendar with minimum code to attach datepicker, how to extend to restrict the dates from a particular day, month or year, how to make calendar to validate start and end date from one control to other after user selection, how to format date before rendering or how to disable... By Ali Adravi On 26 Dec 2017 Viewed: 5,335
JQuery, a popular open source JavaScript library, is CSS3 compliant. With JQuery, you can easily maneuver the DOM elements in your web page. Basically, it allows you to add/delete DOM elements to your HTML based content. If you want to manipulate the DOM elements using JQuery and Visual Studio,... By Deepa Ranganathan On 31 Aug 2015 Viewed: 909
Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi On 18 Apr 2015 Viewed: 7,461