Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/how-to-uncheck-and-check-a-radio-button-using-javascriptjquery
Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!
In my previous post, I share how to uncheck the radio button now I will share with you how to switch the radio button to uncheck and check using the click button event in javascript/jquery. To see the sample out kindly see below.
Before
After
Example code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to unchecked a radio button using JavaScript/jQuery?</title>
</head>
<body>
<h1>How to unchecked a radio button using JavaScript/jQuery?</h1>
<form id="form1">
<p><b>Current Status</b></p>
<input type="radio" value="1" name="status" class="status" checked> Active
<br/><br/>
<button type="button" id="btnSubmit">Deactivate</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnSubmit").on("click", function() {
var button = $(this);
var status = $(".status");
if(status.is(":checked")) {
status.prop("checked", false);
button.html("Activate");
} else {
status.prop("checked", true);
button.html("Deactivate");
}
});
});
</script>
</body>
</html>
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/how-to-uncheck-and-check-a-radio-button-using-javascriptjquery if you want to download this code.
Advanced Laravel SAAS Starter Kit with CRUD Generator - GET YOUR COPY NOW!
Happy coding :)
Top comments (0)