Home • Programming • JQuery Sep 7th, 2015 at 05:25 PM

How to read checked checkbox value by JQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Read checked value</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>
$(function(){

   $("#btn").click(function(){

      var subjects="";

    //method 1     
    $("input[type=checkbox]:checked").each(function(index, element) {
        				
		subjects+=$(this).val()+" ";		
			
     });
  

   // method 2   
    $("input[type=checkbox]").each(function(index, element) {
        
		if($(this).is(":checked")){			
		  subjects+=$(this).val()+" ";
		}			
     });

   //method 3     
    $(".subject:checked").each(function(index, element) {
        				
		subjects+=$(this).val()+" ";		
			
     });

     //output
     $("#output").html(subjects);
	  
   
   });
  

});
</script>
</head>
<body>
<input type="checkbox" value="bengali" class="subject" />Bengali
<input type="checkbox" value="english" class="subject" />English
<input type="checkbox" value="mathematics" class="subject" />Mathematics
<input type="checkbox" value="history" class="subject" />History

<button id="btn">Click</button>

<div id="output"></div>
</body>
</html>

/10

How to read checked checkbox value by JQuery

Comments 1

Share