This post is based on simple concept like how to unchecked checked radio button by using simple Javascript. Suppose you have developed simple HTML form and there is one data which are optional and we have use radio button for get that data by using radio button element. So someone has select any radio button option but after this we want to unchecked checked radio button but normally we can't unchecked radio button. This is because when we have check any radio button then after for unchecked we want to refresh whole page. So for this we have built this tutorial. In this post we have use simple Javascript for unchecked radio button. In this post we have share source code and online demo also.
Online Demo
Option 1
Option 2
Option 3
Source Code
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>How to uncheck checked radio button by using Javascript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<h3 align="center">How to uncheck checked radio button by using Javascript</h3>
<h3><input type="radio" name="radio_button" value="option 1" /> Option 1</h3><br />
<h3><input type="radio" name="radio_button" value="option 2" /> Option 2</h3><br />
<h3><input type="radio" name="radio_button" value="option 3" /> Option 3</h3><br />
</div>
</body>
</html>
<script type="text/javascript">
var radio_button_list = document.getElementsByName('radio_button');
var radio_button;
var count;
for(count = 0; count<radio_button_list.length; count++)
{
radio_button_list[count].onclick = function(){
if(radio_button == this)
{
this.checked = false;
radio_button = null;
}
else
{
radio_button = this;
}
};
}
</script>
0 comments:
Post a Comment