JQuery with HTML checkbox button

From CoderLearner
Jump to: navigation, search

Description

Use JQuery to manipulate the HTML checkbox element.

CheckBox

<input type="checkbox" name="fruit" value="Apple"/>Apple
<input type="checkbox" name="fruit" value="Banana"/>Banana
<input type="checkbox" name="fruit" value="Mango"/>Mango
<input type="checkbox" name="fruit" value="coconut"/>Coconut
<input type="checkbox" name="fruit" value="pear" checked="checked" />Pear
<input type="checkbox" name="fruit" value="graph"/>Graph

Example 1

  • When page load, we will get the pear value.
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Checkbox</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                var fruit = $('input[name="fruit"]:checked').val();
                $('#content').html(fruit);
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <input type="checkbox" name="fruit" value="Apple"/>Apple
        <input type="checkbox" name="fruit" value="Banana"/>Banana
        <input type="checkbox" name="fruit" value="Mango"/>Mango
        <input type="checkbox" name="fruit" value="coconut"/>Coconut
        <input type="checkbox" name="fruit" value="pear" checked="checked"/>Pear
        <input type="checkbox" name="fruit" value="graph"/>Graph
    </body>
</html>

Try It

Get all checked checkboxes

var all_fruits = [];
$(".fruit1:checked").each(function(){
	all_fruits.push(this.value);
});

Join the array with ','

var fruits = all_fruits.join(',');
$('#content').html(fruits);

Example 2

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Checkbox</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('#checkboxcheck').click(function(){
                    var all_fruits = [];
                    $(".fr1:checked").each(function(){
                        all_fruits.push(this.value);
                    });
                    var fruits = all_fruits.join(',');
                    $('#content').html(fruits);
                });
            });
        </script>
    </head>
    <body>
        <div id="content"></div>
        <input type="checkbox" name="fruit" class="fr1" value="Apple"/>Apple
        <input type="checkbox" name="fruit" class="fr1" value="Banana"/>Banana
        <input type="checkbox" name="fruit" class="fr1" value="Mango"/>Mango
        <input type="checkbox" name="fruit" class="fr1" value="coconut"/>Coconut
        <input type="checkbox" name="fruit" class="fr1" value="pear"
                checked="checked"/>Pear
        <input type="checkbox" name="fruit" class="fr1" value="graph"/>Graph

        <button id="checkboxcheck">Check It</button>
    </body>
</html>

Try It

Get all checked checkboxes

$(document).ready(function() {
	$('#checkboxcheck').click(function(){
	        var all_fruits = $('input:checkbox:checked.fruit1').map(function () {
			return this.value;}).get(); 
					
	        var fruits = all_fruits.join(',');
	        $('#content').html(fruits);
	});
});

Get all unchecked checkboxes

var fruits_unchecked =$('.fruit1').not(':checked').map(
      function () {return this.value;}).get().join(',');
					

Example 3

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Checkbox</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>

        <script>
            $(document).ready(function() {
                $('#checkboxcheck').click(function(){
                    var fruits_checked = $('input:checkbox:checked.fr1')
                      .map(function (){
                        return this.value;}).get().join(','); 

                    var fruits_unchecked =$('.fr1').not(':checked').map(function () {
                        return this.value;}).get().join(',');

                    var fruits = 'Checked:'+fruits_checked +'<br/>'
                        + ' Unchecked:'+ fruits_unchecked;

                    $('#content').html(fruits);

                });
            });

        </script>
    </head>
    <body>
        <div id="content"></div>
        <input type="checkbox" name="fruit" class="fr1" value="Apple"/>Apple
        <input type="checkbox" name="fruit" class="fr1" value="Banana"/>Banana
        <input type="checkbox" name="fruit" class="fr1" value="Mango"/>Mango
        <input type="checkbox" name="fruit" class="fr1" value="coconut"/>Coconut
        <input type="checkbox" name="fruit" class="fr1" value="pear" checked="checked" />
Pear
        <input type="checkbox" name="fruit" class="fr1" value="graph"/>Graph

        <button id="checkboxcheck">Check It</button>
    </body>
</html>

Try It