单选框和复选框

最新推荐文章于 2024-08-11 16:46:50 发布

Maizi93

最新推荐文章于 2024-08-11 16:46:50 发布

阅读量9.7k

点赞数

本文链接：https://blog.csdn.net/Maizi93/article/details/72939024

版权

1、单选框以及复选框的使用

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>单选框以及复选框的使用</title>
</head>

<body>
    <form>
        <!--单选框-->
        <label>性别：</label>
        <label>男</label>
        <input type="radio" name="gender" value="man" />
        <label>女</label>
        <input type="radio" name="gender" value="woman" checked="checked"/>    <!--默认选中-->
        <br/><br/>
        
        <!--复选框-->
        <label>爱好：</label>
        <label>篮球</label>
        <input type="checkbox" name="hobby" value="1" />
        <label>足球</label>
        <input type="checkbox" name="hobby" value="2" />
        <label>跑步</label>
        <input type="checkbox" name="hobby" value="3" checked="checked" />     <!--默认选中-->
        <label>跳舞</label>
        <input type="checkbox" name="hobby" value="4" />
    </form>
</body>
</html>

（1）type属性

radio：表示单选框
checkbox：表示多选框

（2）value属性：提交数据到服务器的值（供后端程序使用）

（3）name属性：为控件命名，以备后台程序 ASP、PHP 使用

（4）checked属性：当设置 checked="checked" 时，该选项被默认选中

结果显示如下图：

以上代码只有在点击选项后的圆圈或者小方块的时候才能选中该选项，那么如何实现点击文字就选中选项呢？

2、点击文字选中选项

一般有两种实现方法，具体代码分别如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>如何实现点击文字选中选项</title>
</head>

<body>
    <form>
        <!--第一种方法：把文字和input包含在lable标签中-->
        <!--单选框-->
        <label>性别：</label>
        <label>男<input type="radio" name="gender" value="man" /></label>
        <label>女<input type="radio" name="gender" value="woman" checked="checked"/></label>      <!--默认选中-->
        <br/><br/>
        <!--复选框-->
        <label>爱好：</label>
        <label>篮球<input type="checkbox" name="hobby" value="1" /></label>
        <label>足球<input type="checkbox" name="hobby" value="2" /></label>
        <label>跑步<input type="checkbox" name="hobby" value="3" checked="checked" /> </label>     <!--默认选中-->
        <label>跳舞<input type="checkbox" name="hobby" value="4" /></label>
        
        <!--第二种方法：文字在label标签内,input中的id和<label>标签内的for=""中的名字必须相同-->
        <!--单选框-->
        <label>性别：</label>
        <label for="radio1">男</label>
        <input type="radio" name="gender" value="man" id="radio1" />
        <label for="radio2">女</label>
        <input type="radio" name="gender" value="woman" id="radio2" checked="checked"/>    <!--默认选中-->
        <br/><br/>
        <!--复选框-->
        <label>爱好：</label>
        <label for="check1">篮球</label>
        <input type="checkbox" name="hobby" value="1" id="check1" />
        <label for="check2">足球</label>
        <input type="checkbox" name="hobby" value="2" id="check2" />
        <label for="check3">跑步</label>
        <input type="checkbox" name="hobby" value="3" id="check3" checked="checked" />     <!--默认选中-->
        <label for="check4">跳舞</label>
        <input type="checkbox" name="hobby" value="4" id="check4" />
    </form>
</body>
</html>