Post
Ask Question

Select Or Deselect Multiple CheckList Items Using JQuery

Introduction

This one is a simple application where we can select or deselect multiple check list items using simple HTML and JQuery. Many times we used to do this in form submission to select multiple items.

Description: We need to follow the following steps for implementing this application for our website.

 
Design HTML Page
  1. <head runat="server">  
  2.     <title>Select or Deselect Multiple list</title>  
  3.     <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  4.     <script src="Script/Script.js"></script> 
  5.     <link href="CSS/StyleSheet.css" rel="stylesheet" />  
  6. </head>  
  7. <body>  
  8.     <div id="div1">  
  9.         <ul class="chk-container">  
  10.             <li>  
  11.                 <input class="ck1" type="checkbox" value="item1" />Item 1</li>  
  12.             <li>  
  13.                 <input class="ck1" type="checkbox" value="item2" />Item 2</li>  
  14.             <li>  
  15.                 <input class="ck1" type="checkbox" value="item3" />Item 3</li>  
  16.             <li>  
  17.                 <input class="ck1" type="checkbox" value="item4" />Item 4</li>  
  18.             <li>  
  19.                 <input class="ck1" type="checkbox" value="item5" />Item 5</li>  
  20.             <li>  
  21.                 <input class="ck1" type="checkbox" value="item6" />Item 6</li>  
  22.         </ul>  
  23.     </div>  
  24.     <div class="center-div">  
  25.         <input type="button" value="Add »" id="btn-add" />  
  26.         <br />  
  27.         <br />  
  28.         <input type="button" value="« Remove" id="btn-remove" />  
  29.     </div>  
  30.     <div id="div2">  
  31.         <ul class="chk-container-Add">  
  32.             <li>  
  33.                 <input class="ck1" type="checkbox" value="item7" />  
  34.                 Item 7</li>  
  35.             <li>  
  36.                 <input class="ck1" type="checkbox" value="item8" />  
  37.                 Item 8</li>  
  38.         </ul>  
  39.     </div>  
  40. </body> 
StyleSheet.css
  1. #div1, #div2, .center-div {  
  2.     float: left;  
  3.     padding: 10px;  
  4.     min-height: 150px;  
  5. }  
  6. #div1 ul, #div2 ul {  
  7.         list-style-type: none;  
  8.         padding: 0px;  
  9. }  
  10. .center-div {  
  11.     margin-top: 50px;  
  12.     text-align: center;  
  13. } 
Page view: After this point the page will look like the following in browser,
 
Script.js: Here is the jQuery code for adding and removing items.
  1. $(document).ready(function () {  
  2.         $('#btn-add').click(function () {  
  3.             $('#div1 input[type="checkbox"]:checked').each(function () {  
  4.                 $('.chk-container-Add').append("<li><input class='checkbox2' type='checkbox' value='" + $(this).val() + "'>" + $(this).parent().text() + "</li>"); //append checked to div one  
  5.                 $(this).parent().remove(); //remove this from div1  
  6.             });  
  7.         });  
  8.         $('#btn-remove').click(function () {  
  9.             $('#div2 input[type="checkbox"]:checked').each(function () {  
  10.                 $('.chk-container').append("<li><input class='checkbox2' type='checkbox' value='" + $(this).val() + "'>" + $(this).parent().text() + "</li>");  
  11.                 $(this).parent().remove();  
  12.             });  
  13.         });  
  14.     }); 
You can download the attached project and see the result. Hope that helps you.


Similar Articles