Javascript Radio Button Checked Event Example


Share:
Published By: Admin, Published On: Jul 02, 2021, Category: Javascript

Hello Friends,

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

Here i will give you many example how you can use radio button checked event javascript.

Example : 1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Radio Button Checked Event</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<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 Event Example</h5>
						</div>
						<div class="card-body">
							<form class="mb-2">
							  	Which company do you prefer for laptop?<br>
							  	<input type="radio" name="company" id="Lenovo"> Lenovo<br>
							  	<input type="radio" name="company" id="Dell"> Dell
							</form>
							<button onclick="check()" class="btn btn-primary">Check "Lenovo"</button>
							<button onclick="uncheck()" class="btn btn-info">Uncheck "Lenovo"</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function check() {
		  	document.getElementById("Lenovo").checked = true;
		}
		function uncheck() {
		  	document.getElementById("Lenovo").checked = false;
		}
	</script>
</html>
Output :
Which company do you prefer for laptop?
Lenovo
Example : 2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Javascript Radio Button Checked Event</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	</head>
	<body>
		<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 Event Example</h5>
						</div>
						<div class="card-body">
							<p>Which subject do you like?</p>

							<form action="/action_page.php">
							  	<input type="radio" name="subject" value="laravel"> Laravel<br>
							  	<input type="radio" name="subject" value="javascript"> Javascript<br>
							  	<input type="button" class="btn btn-primary" onclick="test()" value="Send Your choice">
							  	<br><br>
							  	<input type="text" class="form-control" id="sub" size="50">
							  	<input type="submit" class="btn btn-success mt-2" value="Submit">
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function test() {
		  	var subject = document.forms[0];
		  	var txt = "";
		  	var i;
		  	for (i = 0; i < subject.length; i++) {
		    	if (subject[i].checked) {
		      		txt = txt + subject[i].value + " ";
		    	}
		  	}
		  	document.getElementById("sub").value = "Your favourite subject book: " + txt;
		}
	</script>
</html>
Output :
Which subject do you like?
Your favourite subject book: javascript 

It will help you...

Share: