;

How To Check if CheckBox is Checked or Not Using Jquery or Javascript


Tutorialsrack 17/06/2020 Jquery Javascript

In this article, you will learn how to check if the checkbox is checked or not using Jquery or javascript. There are various ways to check if the checkbox is checked or not. In this article, we used the prop() and is() function along with the :checked selector to check if the checkbox is checked or not using jquery or Javascript. 

Example 1: Using prop() function

The prop() function sets or returns the properties and values of the selected elements. This function gets the value of a property for the first element in the set of matched elements or sets one or more properties for every matched element. In the case of a checkbox, this function works well in every condition because every checkbox has checked property which specifies the checkbox status whether it is Checked or Unchecked.

Here is the source code of the program to check if the checkbox is checked or not by using the prop() function in Jquery.

Example 1: Using prop() Function
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>How To Check if Checkbox is Checked or Not using Jquery</title>
  
    <!-- Include Jquery Library -->
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
	<input type="checkbox" name="checkbox" value="checkbox" />CheckBox
	<br />
	<button  type="button" id="btn_submit">Click Here</button>
	
  
	<script>
      // Script to Check if Checkbox is Checked or Not
      // On Button Clicked
	$("#btn_submit").on('click',function(e) {
		if($('input[type="checkbox"]').prop('checked')) {
			alert('Checkbox is Checked');
		} else {
			alert('Checkbox is Unchecked');
		}
	});
	</script>
</body>
</html>

Example 2: Using is() Function 

The is() function checks if one of the selected elements matches the selectorElement. This function checks the currently matched set of elements against a selector, element, or jQuery object and returns true if at least one of these elements matches the given arguments.

Here is the source code of the program to check if the checkbox is checked or not by using the is() function in Jquery.

Example 2: Using is() Function
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>How To Check if Checkbox is Checked or Not using Jquery</title>
  
    <!-- Include Jquery Library -->
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>
	<input type="checkbox" name="checkbox" value="checkbox" />CheckBox
	<br />
	<button  type="button" id="btn_submit">Click Here</button>
	
  
	<script>
      // Script to Check if Checkbox is Checked or Not
      // On Button Clicked
	$("#btn_submit").on('click',function(e) {
		if($('input[type="checkbox"]').is(':checked')) {
			alert('Checkbox is Checked');
		} else {
			alert('Checkbox is Unchecked');
		}
	});
	</script>
</body>
</html>

Example 3: Using :checked Selector and Length

In this example, we used the :checked selector and length, if the length is greater than zero if the checkbox is checked.

Here is the source code of the program to check if the checkbox is checked or not by using the :checked and length in Jquery.

Example 3: Using :checked Selector and Length
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>How To Check if Checkbox is Checked or Not using Jquery</title>

		<!-- Include Jquery Library -->
		<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	</head>

	<body>
		<input type="checkbox" name="checkbox" value="checkbox" />CheckBox
		<br />
		<button type="button" id="btn_submit">Click Here</button>


		<script>
			// Script to Check if Checkbox is Checked or Not
			// On Button Clicked
			$("#btn_submit").on('click', function(e) {
				if ($('input[type=checkbox]:checked').length > 0) {
					alert('Checkbox is Checked');
				} else {
					alert('Checkbox is Unchecked');
				}
			});
		</script>
	</body>

</html>

Example 4: Using document.getElementsById()

In this example, we used the document.getElementsById() function to check if the checkbox is checked or not using javascript.

Here is the source code of the program to check if the checkbox is checked or not by using the document.getElementsById() function in Javascript.

Example 4: Using document.getElementsById().checked
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<title>How To Check if Checkbox is Checked or Not using Jquery</title>

		<!-- Include Jquery Library -->
		<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	</head>

	<body>
		<input type="checkbox" name="checkbox" id="checkbox" value="checkbox" />CheckBox
		<br />
		<button type="button" id="btn_submit">Click Here</button>


		<script>
			// Script to Check if Checkbox is Checked or Not
			// On Button Clicked
			$("#btn_submit").click(function() {
				if (document.getElementById('checkbox').checked) {
					alert("CheckBox is Checked");
				} else {
					alert("CheckBox is Unchecked");
				}
			});
		</script>
	</body>
</html>

I hope this article will help you to understand how to check if the checkbox is checked or not using Jquery or javascript.

Share your valuable feedback, please post your comment at the bottom of this article. Thank you!


Related Posts



Comments

Recent Posts
Tags