Showing posts with label Checked Checkbox Value Using Class In Jquey. Show all posts
Showing posts with label Checked Checkbox Value Using Class In Jquey. Show all posts

Monday, 7 December 2015

Checked Checkbox Value Using Class In Jquey


Here Full Example

How TO Get All Checkbox value Using It's class

Checked Checkbox Value Using Class In Jquey


We can use on change event for every checkbox and getting value of it class.
use push to collect value check it.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Checkbox Value Example</title>
</head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="application/javascript">
function getValueUsingClass(){
   /* declare an checkbox array */
   var chkArray = [];
  
   /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
   $(".chk:checked").each(function() {
   chkArray.push($(this).val());
   });
  
   /* we join the array separated by the comma */
   var selected;
   selected = chkArray.join(',') + ",";
  
   /* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
   if(selected.length > 1){
   alert("You have selected " + selected);
  
  
   }else{
   alert("Please at least one of the checkbox");
   }
   }
</script>
<body>
<input type="checkbox" class="chk" name="test" value="checked1" onchange="getValueUsingClass()"  />checked1
<input type="checkbox" class="chk" name="test" value="checked2"  onchange="getValueUsingClass()"  />checked2
<input type="checkbox" class="chk" name="test" value="checked3" onchange="getValueUsingClass()"  />checked3
<input type="checkbox" class="chk" name="test" value="checked4" onchange="getValueUsingClass()"  />checked4
<input type="checkbox" class="chk" name="test" value="checked5" onchange="getValueUsingClass()"  />checked5
<input type="checkbox" class="chk" name="test" value="checked6" onchange="getValueUsingClass()"  />checked6
<input type="checkbox" class="chk" name="test" value="checked7" onchange="getValueUsingClass()"  />checked7
</body>
</html>