JQuery get value from checkbox

Ok now I will try to explain how to get value from checkbox checked. Example I create data like this checkbox.html:

<html>
<head>
	<title>Test Checkbox</title>
</head>
<body>
	<form>
		<input type="checkbox" name="test" value="2010" />2010
		<button name="check">Check</button>
	</form>
</body>
</html>

And this is example how to get value from checkbox using Jquery checkbox.html:

<html>
<head>
	<title>Test Checkbox</title>
	<script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
</head>
<body>
	<form>
		<input type="checkbox" name="test" value="2010" />2010
		<button name="check">Check</button>
	</form>

<script type="text/javascript">
	$(function (){
		$("button[name=check]").click(function() {
			var check = $("input[name='test']:checked").val();
			alert(check);
	    });
	});
</script>
</body>
</html>

Explanation:

  1. For line 4.

    <script type=”text/javascript” src=”scripts/jquery-2.0.2.js”></script>

    we must download script jquery-2.0.2 from here http://code.jquery.com/jquery-2.0.2.js and save to folder scripts and give it a name jquery-2.0.2.js. Take a look at this picture:

  2. For line 13.

    $(function (){

    this is same such as

    $(document).ready(function() {
    // Handler for .ready() called.
    });

    For more info, read this page: http://api.jquery.com/ready/

  3. For Line 14 & 17.

    $(“button[name=check]”).click(function() {

    });

    is a function if we clicked button with name check.

    <button name=”check”>Check</button>

    what operation you want.

  4. For line 15 -16.

    var check = $(“input[name=’test’]:checked”).val();
    alert(check);

    this is a operation to get value from input form with name test.

    <input type=”checkbox” name=”test” value=”2010″ />2010

And maybe you have question. How to get value from many checkbox input? checkbox.html

<html>
<head>
	<title>Test Checkbox</title>
	<script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
</head>
<body>
	<form>
		<input type="checkbox" name="test" value="2010" />2010
		<input type="checkbox" name="test" value="2011" />2011
		<input type="checkbox" name="test" value="2012" />2012
		<button name="check">Check</button>
	</form>

<script type="text/javascript">
	$(function (){
		$("button[name=check]").click(function() {
			var check = $("input[name='test']:checked").val();
			alert(check);
	    });
	});
</script>
</body>
</html>

So we must change line 18-19 to be like this:

<script type="text/javascript">
	$(function (){
		$("button[name=check]").click(function() {
	        var allcheck = [];
	        $("input[name=test]:checked").each(function() {
	            allcheck.push($(this).val());
	        });
	        alert(allcheck);
	    });
	});
</script>

Explanation
For line 15 – 19.

var allcheck = [];

First we must create variable with name allcheck and with data type array.

$(“input[name=test]:checked”).each(function() {

});

Second we create function if button with name test is clicked and we use each function to get all element from checkbox.
And the last is how to create if we click 1 checkbox, all checkbox input selected?
To make it that way, then take a look at this code Checkbox-all.html:

<html>
<head>
	<title>Test Checkbox</title>
	<script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
</head>
<body>
	<form>
		<input type="checkbox" name="all" id="checkall" />Check All
		<input type="checkbox" name="test" value="2010" />2010
		<input type="checkbox" name="test" value="2011" />2011
		<input type="checkbox" name="test" value="2012" />2012
		<button name="check">Check</button>
	</form>

<script type="text/javascript">
	$(function (){
		$('input[name=all]').on('click',function(){
		    if($(this).is(':checked')) {
		    	$("input[name='test']").prop("checked","checked");
		    } else {
		    	$("input[name='test']").removeAttr("checked");
		    }
		});
		
	});
</script>
</body>
</html>

Explanation

$(‘input[name=all]’).on(‘click’,function(){
}

for this, if we click form input with name is all, so we can run function.

if($(this).is(‘:checked’))

So if $(this) or $(‘input[name=all]’) is checked, and we run select and checked all form input with name test. And

else {
$(“input[name=’test’]”).attr(“checked”,null);
}

If input name checkall not checked, we run function remove attribute checked.
Oya we can compress that function to be like this:

<html>
<head>
	<title>Test Checkbox</title>
	<script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
</head>
<body>
	<form>
		<input type="checkbox" name="all" id="checkall" />Check All
		<input type="checkbox" name="test" value="2010" />2010
		<input type="checkbox" name="test" value="2011" />2011
		<input type="checkbox" name="test" value="2012" />2012
		<button name="check">Check</button>
	</form>

<script type="text/javascript">
	$(function (){
		$('input[name=all]').on('click', function () {
        	$(this).closest('form').find(':checkbox').prop('checked', this.checked);
    	});
	});
</script>
</body>
</html>

So for the finishing, se code like this:

<html>
<head>
	<title>Test Checkbox</title>
	<script type="text/javascript" src="scripts/jquery-2.0.2.js"></script>
</head>
<body>
	<form>
		<input type="checkbox" name="all" id="checkall" />Check All
		<input type="checkbox" name="test" value="2010" />2010
		<input type="checkbox" name="test" value="2011" />2011
		<input type="checkbox" name="test" value="2012" />2012
		<button name="check">Check</button>
	</form>

<script type="text/javascript">
	$(function (){
		$('input[name=all]').on('click', function () {
        	$(this).closest('form').find(':checkbox').prop('checked', this.checked);
    	});

    	
		$('button[name=check]').click(function() {
			var allcheck = [];

			$("input[name=test]:checked").each(function() {
                allcheck.push($(this).val());
            });
            alert(allcheck);
		})
	});
</script>
</body>
</html>

And Finish….. 😀

Advertisements

2 comments

  1. I see a lot of interesting content here, i know writing articles requires a lot
    of time, but i know unlimited source of content for your site , just search in google – rewriter creates
    an unique article in a minute

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s