JQuery with HTML checkbox button
From w3cyberlearnings
Contents |
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: Get the default checkbox value TRY-IT
- When page load, we will get the pear value.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(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>
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: Get all checked checkboxes TRY-IT
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#checkboxcheck').click(function(){
var all_fruits = [];
$(".fruit1: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="fruit1" value="Apple"/>Apple
<input type="checkbox" name="fruit" class="fruit1" value="Banana"/>Banana
<input type="checkbox" name="fruit" class="fruit1" value="Mango"/>Mango
<input type="checkbox" name="fruit" class="fruit1" value="coconut"/>Coconut
<input type="checkbox" name="fruit" class="fruit1" value="pear" checked="checked" />Pear
<input type="checkbox" name="fruit" class="fruit1" value="graph"/>Graph
<button id="checkboxcheck">Check It</button>
</body>
</html>
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: TRY-IT
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Checkbox Example</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#checkboxcheck').click(function(){
var fruits_checked = $('input:checkbox:checked.fruit1').map(function () {
return this.value;}).get().join(',');
var fruits_unchecked =$('.fruit1').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="fruit1" value="Apple"/>Apple
<input type="checkbox" name="fruit" class="fruit1" value="Banana"/>Banana
<input type="checkbox" name="fruit" class="fruit1" value="Mango"/>Mango
<input type="checkbox" name="fruit" class="fruit1" value="coconut"/>Coconut
<input type="checkbox" name="fruit" class="fruit1" value="pear" checked="checked" />Pear
<input type="checkbox" name="fruit" class="fruit1" value="graph"/>Graph
<button id="checkboxcheck">Check It</button>
</body>
</html>
Related Links
Jquery and HTML Elements
