首页 > 代码库 > html中<radio>单选按钮控件标签用法解析及如何设置默认选中

html中<radio>单选按钮控件标签用法解析及如何设置默认选中

2024-08-02 14:22:42   217人阅读

Radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。由www.169it.com搜集整理

一、单选按钮控件语法

1

<input name="Fruit" type="radio" value="" />

使用html input标签，name为自定义，type类型为“radio”的表单.

二、radio单选按钮代码举例

1、html代码片段：

1

2

3

4

5

6

7

8

<form action="" method="get">

您最喜欢水果？<br /><br />

<label><input name="Fruit" type="radio" value="" />苹果 </label>

<label><input name="Fruit" type="radio" value="" />桃子 </label>

<label><input name="Fruit" type="radio" value="" />香蕉 </label>

<label><input name="Fruit" type="radio" value="" />梨 </label>

<label><input name="Fruit" type="radio" value="" />其它 </label>

</form>

2.举例代码片段二(默认选中设置举例):

1

2

3

<input type="radio" name="identity" value="http://www.mamicode.com/学生" checked="checked" />学生

<input type="radio" name="identity" value="http://www.mamicode.com/教师" />教师

<input type="radio" name="identity" value="http://www.mamicode.com/管理员" />管理员

在代码举例二种， checked="checked" 表示默认选中项设置。

3.代码举例三(js操作radio):

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

<script>

<!--

    //选中2返回的也是1，找到第一个ID为该值的DOM，弹出 1

    function getVById(){alert(document.getElementById(‘test11‘).value);}

    function getVByName(){

        var tt = document.getElementsByName(‘test11‘);

        for (var iIndex = 0; iIndex < tt.length ; iIndex++ )

        {

            if(tt[iIndex].checked)

            {

                alert(tt[iIndex].value);

                break;

            }

        }

    };

-->

</script>

<title>http://www.169it.com</title>

</head>

<body>

    <input type="radio" id="test11" name="test11" value="http://www.mamicode.com/1" />测试1

    <input type="radio" id="test11" name="test11" value="http://www.mamicode.com/2" />测试2

    <input type="button" value="http://www.mamicode.com/BTN_ByID" onclick="getVById()" />

    <input type="button" value="http://www.mamicode.com/BTN_ByName" onclick="getVByName()" />

</body>

<html>

  • 文章来源:html中<radio>单选按钮控件标签用法解析及如何设置默认选中

 

html中<radio>单选按钮控件标签用法解析及如何设置默认选中


联系
我们