Hi friends, in this tutorial we will learn radio button change event example using jquery, this article will give you a small example to radio button change event from jquery. click on radio button and then run functions for using jquery change event.
We use .change() jquery event and make simple example of radio button change event jquery, Which are as follows.
Example 1: using radio button class
<!DOCTYPE html>
<html>
<head>
<title>jquery radio button change event example - phpicoder.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>jquery radio button change event example - phpicoder.com</h1>
<label>
<input type="radio" name="gender" value="Male" class="myGender"> Male
</label>
<label>
<input type="radio" name="gender" value="Female" class="myGender"> Female
</label>
<script>
$(document).ready(function(){
$("body").on("change", ".myGender", function(event){
if (this.value == 'Male') {
alert("This is a Male");
}else if (this.value == 'Female') {
alert("This Is a Female");
}
});
});
</script>
</body>
</html>
Example 2: using radio button name
<!DOCTYPE html>
<html>
<head>
<title>jquery radio button change event example - phpicoder.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h1>jquery radio button change event example - phpicoder.com</h1>
<label>
<input type="radio" name="gender" value="Male"> Male
</label>
<label>
<input type="radio" name="gender" value="Female"> Female
</label>
<script>
$(document).ready(function(){
$('input[type=radio][name=gender]').change(function() {
if (this.value == 'Male') {
alert("This is a Male");
}else if (this.value == 'Female') {
alert("This Is a Female");
}
});
});
</script>
</body>
</html>
I hope it can help you...
Related Post