jQuery Select Multiple Checkboxs | Lessoncup Programming Blog

Thursday, 7 November 2013

jQuery Select Multiple Checkboxs

Hi, today we are going to learn about how to select multiple checkboxes  using jQuery, before going to work on this we should consider the difference between attributes and properties, generally we use attr() method to get the attributes before jqury 1.6 this method retrieving property values along with attributes.  



but after jquery resolved this problem from 1.6.2 version we use prop() method the prop method retrieves only property values, and the checked attribute of checkbox is consider to be an Boolean attribute it means true / false

HTML

take the checkboxes and arrange by order, on top of the checkbox is our main box, give it ID name #ckall, and give the class name .ckb to other checkboxes, and i am putting one div to see the message to how many elements are checked are not checked
<div id="lessoncup">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="chart">
  <tr>
    <td width="10%" height="40" align="center" valign="middle" bgcolor="#FF6600" class="chart">
      <input type="checkbox" name="ckall" id="ckall" class="ckball"></td>
    <td width="20%" height="40" align="center" valign="middle" bgcolor="#FF6600" class="chart">Name</td>
    <td width="24%" height="40" align="center" valign="middle" bgcolor="#FF6600" class="chart">Gender</td>
    <td width="33%" align="center" valign="middle" bgcolor="#FF6600" class="chart">Email</td>
  </tr>
  <tr>
    <td height="40" align="center" valign="middle" class="chart"><input type="checkbox" name="ck2" class="ckb"></td>
    <td height="40" align="center" valign="middle" class="chart">Lesson Cup</td>
    <td height="40" align="center" valign="middle" class="chart">Male</td>
    <td align="center" valign="middle" class="chart">lessoncup@domain.com</td>
  </tr>
  <tr>
    <td height="40" align="center" valign="middle" class="chart"><input type="checkbox" name="ck2" class="ckb"></td>
    <td height="40" align="center" valign="middle" class="chart">khasim</td>
    <td height="40" align="center" valign="middle" class="chart">Male</td>
    <td align="center" valign="middle" class="chart">khasim@domain.com</td>
  </tr>
  <tr>
    <td height="40" align="center" valign="middle" class="chart"><input type="checkbox" name="ck2" class="ckb"></td>
    <td height="40" align="center" valign="middle" class="chart">sthish</td>
    <td height="40" align="center" valign="middle" class="chart">Male</td>
    <td align="center" valign="middle" class="chart">sathish@domain.com</td>
  </tr>
  <tr>
    <td height="40" align="center" valign="middle" class="chart"><input type="checkbox" name="ck" class="ckb"></td>
    <td height="40" align="center" valign="middle" class="chart">srinivas</td>
    <td height="40" align="center" valign="middle" class="chart">Male</td>
    <td align="center" valign="middle" class="chart">srinivas@domain.com</td>
  </tr>
  
</table>
<div id="display" style="padding:5px;"></div>
</div>

CSS

<style>

body{font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#FFF; margin:0; padding:0;}

#lessoncup{width:630px; height:250px; border:solid #CCC 1px; padding:10px; margin:0 auto; margin-top:80px; font-family:Arial, Helvetica, sans-serif; font-size:11px;}

.chart{border:solid  #CCC 1px;}

.alldel{border:0; background-color:#060; padding:8px; color:#FFF; cursor:pointer;}

.delete{cursor:pointer; color:#060;}

</style>

JAVASCRIPT

write the click function and selector to be an #ckall checkbox, inside the function use prop() method and assign "checked" property to be an attribute of other checkboxes, the :checked selector use to checkboxes and radio buttons, to find a length of checked or unchecked boxes use (selector:checked).length 
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>
  
  $(document).ready(function(){
   
   
   $('#ckall').click(function(){
    
    $('.ckb').prop("checked",this.checked);
    
    var ckall = $(".ckb:checked").length;
    
    $('#display').html('<b>'+ckall+(ckall==1 ? " Element" : " Elements")+ " checked");
    
   });
   
   $('.ckb').click(function(){
    
    $(this).prop("checked",this.checked);
    
    var ck = $(".ckb:checked").length;
    
    $('#display').html('<b>'+ck+(ck==1 ? " Element" : " Elements")+ " checked");
    
   });
   
   
  });
  
</script>

Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons