Radio Button Events:
Radio button is a multi-select process, but radio button is also an HTML element, so it represents an object for JavaScript.
Example: Obtaining a radio button data
<!doctype html>
<meta charset= "Utf-8" >
<meta name= "description" content= "All kinds of input" >
<meta name= "keywords" content= "input,html" >
<title> radio button Testing </title>
<script type= "Text/javascript" >
window.onload = function () {
document.getElementById (' showbtn '). AddEventListener (' click ', Function () {
var Sexarr = document.all (' sex ');
if (sexarr[0].checked) {
alert ("Gender is:" + sexarr[0].value);
}else{
alert ("Gender is:" + sexarr[1].value);
}
},false);
}
</script>
<body>
<form action= "" >
Gender: <input type= "Radio" name= "Sex" id= "sex" value= "male-male" checked= "yes" > male
<input type= "Radio" name= "Sex" id= "Sex" value= "female-women" > Women <br/>
<input type= "button" id= "showbtn" value= "select" ></input>
</form>
</body>
Code:
<!doctype html>window.onload=function() {document.getElementById (' Showbtn '). AddEventListener (' click ',function() { varSexarr = document.all (' Sex '); if(sexarr[0].checked) {alert ("Sex is:" + sexarr[0].value); }Else{alert ("Sex is:" + sexarr[1].value); } },false); } </script> Gender:<input type= "Radio" name= "Sex" id= "sex" value= "male-Men" checked= "yes" >male<input type= "Radio" name= "Sex" id= "Sex" value= "female-women" > Women <br/> <input type= "button" id= "s Howbtn "value=" select "></input> </form> </body>The default gender is male, as follows:
When selecting male, the box is as follows:
When choosing a female, the box is as follows
JavaScript: Event Handling for radio button