Javascript Radio Button Checked Or Not Example

Jul 09, 2021 . Admin

Hello Friends,

Now let's see example of how to get radio button checked or not example. We will use how to get radio button checked or not in javascript. Here you will learn how to use javascript get radio button checked or not. This is a short guide on get radio button checked or not. Let's get started with how to get radio button checked or not in javascript.

Here i will give you many example how you can get radio button checked or not javascript.

Example : 1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Radio Button Checked Or Not Example</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	</head>
	<body class="bg-dark">
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h5>Javascript radio button checked or not</h5>
						</div>
						<div class="card-body">
							<p>Click on the button to check whethera radio button is sected or not</p>
						    <form>
						        <input type="radio" name="sub" id="Laravel" value="Laravel"> Laravel<br>
						        <input type="radio" name="sub" id="Java" value="Java"> Java<br>
						        <input type="radio" name="sub" id="PHP" value="PHP"> PHP<br><br>
						        <button type="button" class="btn btn-primary" onclick="show()">Submit</button>
						    </form>
						    <br>
						    <div id="show" class="text-danger"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function show() { 
	            if(document.getElementById('Laravel').checked) {
	                document.getElementById("show").innerHTML
	                    = document.getElementById("Laravel").value
	                    + " radio button checked";
	            }
	            else if(document.getElementById('Java').checked) {
	                document.getElementById("show").innerHTML
	                    = document.getElementById("Java").value
	                    + " radio button checked";  
	            }
	            else if(document.getElementById('PHP').checked) {
	                document.getElementById("show").innerHTML
	                    = document.getElementById("PHP").value
	                    + " radio button checked";  
	            }
	            else {
	                document.getElementById("show").innerHTML
	                    = "No one selected";
	            }
	        }
		</script>
	</body>
</html>

Output :

Laravel radio button checked

Example : 2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Radio Button Checked Or Not Example</title>
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	</head>
	<body class="bg-dark">
		<div class="container mt-5">
			<div class="row">
				<div class="col-md-6 offset-md-3">
					<div class="card">
						<div class="card-header">
							<h5>Javascript radio button checked or not</h5>
						</div>
						<div class="card-body">
							<p>Click on the button to check whether a radio button is sected or not</p>
						    <form>
						        <input type="radio" name="sub" id="Read" value="Read"> Read<br>
						        <input type="radio" name="sub" id="Learn" value="Learn"> Learn<br>
						        <input type="radio" name="sub" id="Dance" value="Dance"> Dance<br><br>
						        <button type="button" class="btn btn-primary" onclick="show()">Submit</button>
						    </form>
						    <br>
						    <div id="show" class="text-danger"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function show() { 
				var checkRadio = document.querySelector(
				    'input[name="sub"]:checked');
				if(checkRadio != null) {
				    document.getElementById("show").innerHTML
				        = checkRadio.value
				        + " radio button checked";
				}
				else {
				    document.getElementById("show").innerHTML
				        = "No one selected";
				}
			}
		</script>
	</body>
</html>

Output :