Show and Hide DIV berdasarkan Radio Button yang Dipilih Menggunakan jQuery
Saat membuat atau membangun suatu progam, terkadang juga diperlukan fitur pilihan. Contohnya seperti formulir pendaftaran peserta lomba, terdapat pilihan apakah mendaftar untuk diri sendiri atau mendaftar sebagai tim. Ketika user memilih opsi mendafatar untuk diri sendiri maka user perlu input nama user tersebut, tapi jika user mendafar sebagai tim maka user tersebut perlu input nama timnya.
Nah, di artikel ini saya akan membagikan beberapa contoh cara show and hide div berdasarkan radio button yang dipilih menggunakan jQuery. Untuk membuat fitur seperti itu, kita bisa menggunakan method dari jQuery yaitu show() dan hide(). Di bawah ini saya memberikan 3 contoh bagaimana cara membuat show and hide div berdasarkan nilai dari radio button yang dipilih, dimana pada awalnya semua div tersebut kita beri style display:none.
- Contoh 1
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide div elements using radio buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.select {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>Show and Hide div based on radio button selection using jquery</p>
<div>
<label><input type="radio" name="type" value="single" />Single</label>
<label><input type="radio" name="type" value="team" />Team</label>
</div>
<div class="single select">
<label style="color: black">Your Name:</label>
<input type="text" placeholder="Your Name" />
</div>
<div class="team select">
<label style="color: black">Your Team Name:</label>
<input type="text" placeholder="Your Team Name" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var target = $("." + inputValue);
$(".select").not(target).hide();
$(target).show();
});
});
</script>
</center>
</body>
</html>
- Contoh 2 (Tambahan Alert)
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide div elements using radio buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.select {
color: #fff;
padding: 30px;
display: none;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>Show and Hide div based on radio button selection using jquery</p>
<div>
<label><input type="radio" name="type" value="single" />Single</label>
<label><input type="radio" name="type" value="team" />Team</label>
</div>
<div class="single select">
<label style="color: black">Your Name:</label>
<input type="text" placeholder="Your Name" />
</div>
<div class="team select">
<label style="color: black">Your Team Name:</label>
<input type="text" placeholder="Your Team Name" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
var target = $("." + inputValue);
$(".select").not(target).hide();
$(target).show();
alert("Radio button '" + inputValue + "' is selected");
});
});
</script>
</center>
</body>
</html>
- Contoh 3
<!DOCTYPE html>
<html>
<head>
<title>Show and Hide div elements using radio buttons</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
.single {
display: block;
}
.team {
display: none;
}
.select {
color: #fff;
padding: 30px;
margin-top: 30px;
width: 100%;
}
label {
margin-right: 20px;
}
</style>
</head>
<body>
<center>
<h1>Codelapan</h1>
<p>Show and Hide div based on radio button selection using jquery</p>
<div>
<label><input type="radio" name="type" value="single" checked/>Single</label>
<label><input type="radio" name="type" value="team" />Team</label>
</div>
<div class="single select" id="single">
<label style="color: black">Your Name:</label>
<input type="text" placeholder="Your Name" />
</div>
<div class="team select" id="team">
<label style="color: black">Your Team Name:</label>
<input type="text" placeholder="Your Team Name" />
</div>
<script type="text/javascript">
$('input[type="radio"]').click(function () {
var inputValue = $(this).attr("value");
if (inputValue == "team") {
$("#single").hide();
$("#team").show();
} else {
$("#team").hide();
$("#single").show();
}
});
</script>
</center>
</body>
</html>
Selamat mencoba dan semoga artikel ini bisa bermanfaat. Sampai jumpa di artikel berikutnya 🚀🚀🚀
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 66095 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 31803 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 30198 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28293 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27463 views