Please navigate to the bottom of the page for Table of Contents

Saturday, July 16, 2011

jQuery to select/deselect all items in a CheckBoxList

In modern day sites, the user sometimes is presented with multiple options and she can either select individual options or all. The same thought also applies when deselecting the options. For example, in the screen shot below, the user can select one or more options:

image

Now wouldn’t it be nice that the user had a simple way to select/deselect all the containers in one click?

Question: Using jQuery, provide a simple way for the user to select and deselect all the checkboxes in a checkboxlist.

Let us first build our ASP.NET page. The page will have 2 basic elements: A standalone asp:CheckBox to enable select/deselect all option. An asp:CheckBoxList to hold our user options.

Select one or more containers:<br /><br />
<!-- a standalone checkbox to select/deselect all -->
<asp:CheckBox runat="server" ID="selectAllCb" Text="Select All" />

<!-- our actual list containing user options -->
<asp:checkboxlist runat="server" ID="containerCBL">
<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Large</asp:ListItem>
<asp:ListItem>Micro</asp:ListItem>
<asp:ListItem>Regular</asp:ListItem>
<asp:ListItem>Unknown</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
<asp:ListItem>Virtual</asp:ListItem>
</asp:checkboxlist>


With our ASP.NET page defined, the jQuery part is actually quite simple. All we need to do is to attach to the click() event of the standalone checkbox and copy its checked state to the checkbox list.


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SelectAll.aspx.cs" 
Inherits="jQueryInterviewQuestions.SelectAll" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Select/Deselect</title>
<!-- include jQuery -->
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
   1:  
   2:  
   3:     <script type="text/javascript">
   4:         // hook to the document ready function
   5:         $(document).ready(function () 
   6:         {
   7:             // find the select all checkbox
   8:             var selectAll = $('#<%=selectAllCb.ClientID%>');
   9:  
  10:             // hook onto select all checkbox's click event
  11:             selectAll.click(
  12:                 function () 
  13:                 {
  14:                     // for all input types of checkbox
  15:                     // for the container
  16:                     // set the attribute to the value
  17:                     // of select all checkbox
  18:                     $("#<%=containerCBL.ClientID%> input[type='checkbox']").
  19:                     attr('checked', selectAll.is(':checked'));
  20:                 }
  21:             );
  22:         });
  23:     
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
Select one or more containers:<br /><br />
<!-- a standalone checkbox to select/deselect all -->
<asp:CheckBox runat="server" ID="selectAllCb" Text="Select All" />

<!-- our actual list containing user options -->
<asp:checkboxlist runat="server" ID="containerCBL">
<asp:ListItem>Small</asp:ListItem>
<asp:ListItem>Large</asp:ListItem>
<asp:ListItem>Micro</asp:ListItem>
<asp:ListItem>Regular</asp:ListItem>
<asp:ListItem>Unknown</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
<asp:ListItem>Virtual</asp:ListItem>
</asp:checkboxlist>
</div>
</form>
</body>
</html>

17 comments:

  1. very good post. Thank you

    ReplyDelete
    Replies
    1. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

      Delete
  2. Really Useful. Thank you! :)

    ReplyDelete
  3. I wanted to thank you for this excellent read!! I definitely loved every little bit of it.Cheers for the info!!!! & This is the perfect blog for anyone who wants to know about this topic. I like play games five nights at freddy’s 4 | game word cookies answers | hotmail sign in

    ReplyDelete
  4. Crypto-currency as a modern form of the digital asset has received a worldwide acclaim for easy and faster financial transactions and its awareness among people have allowed them to take more interest in the field thus opening up new and advanced ways of making payments. Crypto.com Referral Code with the growing demand of this global phenomenon more,new traders and business owners are now willing to invest in this currency platform despite its fluctuating prices however it is quite difficult to choose the best one when the market is full. In the list of crypto-currencies bit-coins is one of the oldest and more popular Crypto.com Referral Code for the last few years. It is basically used for trading goods and services and has become the part of the so-called computerized block-chain system allowing anyone to use it thus increasing the craze among the public, Crypto.com Referral Code.

    Common people who are willing to purchase BTC can use an online wallet system for buying them safely in exchange of cash or credit cards and in a comfortable way from the thousands of BTC foundations around the world and keep them as assets for the future. Due to its popularity, many corporate investors are now accepting them as cross-border payments and the rise is unstoppable. With the advent of the internet and mobile devices,information gathering has become quite easy as a result the BTC financial transactions are accessible and its price is set in accordance with people’s choice and preferences thus leading to a profitable investment with Crypto.com Referral Code. Recent surveys have also proved that instability is good for BTC exchange as if there is instability and political unrest in the country due to which banks suffer then investing in BTC can surely be a better option. Again bit-coin transaction fees are pretty cheaper and a more convenient technology for making contracts thus attracting the crowd. The BTC can also be converted into different fiat currencies and is used for trading of securities, for land titles, document stamping, public rewards and vice versa.

    Another advanced block-chain project is Ethereumor the ETH which has served much more than just a digital form of crypto-currency Crypto.com Referral Code and its popularity in the last few decades have allowed billions of people to hold wallets for them. With the ease of the online world,the ETH have allowed the retailers and business organizations to accept them for trading purposes, therefore, can serve as the future of the financial system.

    ReplyDelete
  5. BUY EMAIL LIST FROM RIGHT PROVIDER
    Email is a personal way of making contact to your prospects. And since it is a private message, trust and connection are built already. purchase email lists The conversion rate is also higher compared to mainstream media due to low operational and overhead costs. On top of that, email is easier to monitor and evaluate than printed materials. Through email marketing, you can jumpstart your b2b lead generation regardless of what type of industry you are in. The first step to buy email list for marketing is choosing the right email list provider. You need to buy email list to get ahold of the valuable information of your would-be clients for your brand. In this way, it will be easier for you to search for businesses, find contact persons and decision makers and go about your product and services.

    ReplyDelete
  6. This information is impressive..I am inspired with your post writing style & how continuously you describe this topic.

    Apache Spark Training in Pune
    Spark Training Institute in Pune

    ReplyDelete
  7. Internet Download Manager Crack ed Download
    If you cannot afford to purchase the Internet Download Manager sequential number in the (moment), then it is possible to readily download the online download manager crack version. Don't stress IDM Crack can also be full edition, you may down load the deciphered IDM from the URL given below or you need to utilize IDM serial number to register the online downloadmanager.
    Once we know, there are many IDM busted models are available and also the Internet download manager limitation is also available. Still, if you are a person who can readily afford the applications, then you must purchase the applications as it ailing help the programmers to pay for their bills also to spend the money generated by sales of the Internet download manager or even IDM crack full variant in making the software easier and much more useful because new features also cost the company in execution and research. You can purchase the original IDM full variant through their official site.

    ReplyDelete
  8. Vacation rentals in Dubai is a DTCM licensed holiday home Operator managing vacation rental villas and apartments for short and mid term stay in Dubai.

    ReplyDelete
  9. Friendly Finance is South Africa's number 1 choice for finance - providing customers with all the information they need to make better financial decisions. friendly finance We provide hundreds of comparisons of common consumer finance products, such as personal loans, car loans, short-term loans and credit cards. Think of us as a helping hand in selecting consumer finance products.

    ReplyDelete
  10. Testimonial Review of Taskade, Taskade Ratings the all-in-one collaboration platform for remote teams. Unleash your team productivity with task lists, mindmaps, and video chat.

    ReplyDelete
  11. Recently, the keto diet has become extremely popular for its health benefits such as weight loss and preventing disease. A custom Keto plan for life! Visit here: keto custom plan

    ReplyDelete
  12. Find the perfect handmade gift, sana sana rana vintage & on-trend clothes, unique jewelry, and more… lots more.

    ReplyDelete
  13. Health Experts have proven that regular exercise coupled with a good diet allow you to live longer and healthier. In this busy day and age, not everyone has the time to go to the gym - resulting to a lot of overweight people that desperately need to exercise. A healthy alternative is for you to Buy Home Gym Equipments that you can store in your own home or even at your office. Here are some tips when buying home gym equipment.

    First, know your fitness goals and keep these goals in mind when you are buying home gym equipment. One of the biggest mistakes that people make is buying the biggest or trendiest fitness machine simply because they like how it looks. More often than not, these end up gathering dust in your storage rooms or garage because you never end up using them. It is important to take note of what particular type of physical activity you want or enjoy doing before you buy your exercise machine. If you are looking to loose a few pounds and you enjoy walking or hiking, a treadmill is the best option for you. If you are looking to tone your lower body while burning calories a stationary bike is your obvious choice. Similarly, Special Equipments for Core Strength Exercises, Strength Training Weight Vests, Core Strength & Abdominal Trainers, Home Cardio Training, Strength Training Power Cages, Strength Training Racks & More.

    Second, set aside a budget before Buying Home Gym Equipments. Quality exercise machines do not come cheap. They are constantly exposed to wear and tear when they are used properly. So, pick machines that are built to last and have passed quality certifications to get the most out of your money. If you are operating on a tight budget, think about investing in several weights, We can Provide you High Quality Home Gym Equipments at Very Low Prices for your Complete Uses: Core Strength Exercises, Strength Training Weight Vests, Core Strength & Abdominal Trainers, Home Cardio Training, Strength Training Power Cages, Strength Training Racks & More.

    Its the Right Time to Buy Home Gym Equipments for you at Very Low Prices.

    ReplyDelete
  14. - Como organizar sua Semana com o Taskade - Segunda Feira, primeiro dia.
    - Como organizar sua semana com o Taskade - Terça - Vlog de Produtividade
    Como organizar sua semana com o Taskade - Quarta
    - Como organizar sua semana com o Taskade - Quinta - Vlog Produtividade.
    - Taskade - Sexta, Sábado e Domingo. Como foi e uma grande novidade

    ReplyDelete
  15. ac repair and services in bachupally Extend the Lifespan of Your System with Proper Maintenance Like all machines, air conditioners benefit from regular maintenance; we know that for a fact.

    ReplyDelete