关闭

JS Radio

94人阅读 评论(0) 收藏 举报
分类:
<html>
<body>
<h1>我是怎么样的人?</h1>
<label><input type="radio" name="myRadio" onclick="myFun()" value="1" >clever</label>
<input type="radio" name="myRadio" onclick="myFun()" value="2">smart
<input type="radio" name="myRadio" onclick="myFun()" value="3" checked="true">handsome
<input type="radio" name="myRadio" disabled="true" value="4">ugly
<p id="demo" style="color:red">你非常有眼光!</p>
<script>
function myFun()
{
    var obj=document.getElementsByName("myRadio");
    for(var i=0;i<obj.length;i++)
    {
        if(obj[i].checked)
        {
            var value=obj[i].value;
            if(value==1)
            {
                document.getElementById("demo").innerHTML="你有眼光!";
                break;
            }
            if(value==2)
            {
                document.getElementById("demo").innerHTML="你很有眼光!";
                break;
            }
            if(value==3)
            {
                document.getElementById("demo").innerHTML="你非常有眼光!";
                break;
            }           }

    }   
}
</script>
</body>
</html>

Result:
这里写图片描述
Tips:
1:The element label itself does not have an effect.But if you click text inside this element,you’ll trigger event.In other words,when the user selects the tab, the browser will automatically focus to the associated controls.In a word,if you click the text clever,the radio will also be checked,but other texts will not have same effect.
2:The attribute name let you choose only one radio at one time.All the radios can be checked
simultaneously if you miss the attribute name.

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13882次
    • 积分:817
    • 等级:
    • 排名:千里之外
    • 原创:123篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条