Program:
Output:
<html>
<body>
<form id="form">
<input type="radio" id="r1" name="fruits" value="Mango">Mango<br>
<input type="radio" id="r2" name="fruits" value="Apple">Apple<br>
<input type="radio" id="r3" name="fruits" value="Orange">Orange<br>
<input type="checkbox" id="c1" name="color" value="Red">Red<br>
<input type="checkbox" id="c2" name="color" value="Blue">Blue<br>
<input type="checkbox" id="c3" name="color" value="Yellow">Yellow<br>
<input type="button" id="b1" onclick="change()" value="Assign">
<p id="panel"></p>
</form>
</body>
<script>
function change()
{
var panel = document.getElementById("panel");
var f1 = document.getElementById("form");
var a = document.getElementById("r1").value;
var b = document.getElementById("r2").value;
var c = document.getElementById("r3").value;
var d = document.getElementById("c1").value;
var f = document.getElementById("c2").value;
var e = document.getElementById("c3").value;
var q = " ";
alert("Hello"+b);
if(document.getElementById("r1").checked)
panel.innerHTML ="Your Favourite Fruit "+a;
else if(document.getElementById("r2").checked)
panel.innerHTML ="Your Favourite Fruit "+b;
else
panel.innerHTML ="Your Favourite Fruit "+c;
for(var i=0 ; i<f1.color.length ; i++)
{
if(f1.color[i].checked)
{
panel.innerHTML +="<br> Your Favourite Color "+f1.color[i].value+"";
}
}
}
</script>
</html>
Output:
