单选框的实现和获取对应的值

最新推荐文章于 2023-10-31 22:09:55 发布

萌新贤的日常

最新推荐文章于 2023-10-31 22:09:55 发布

阅读量2.3k

点赞数 4

分类专栏：前端页面

本文链接：https://blog.csdn.net/weixin_43987277/article/details/92643935

版权

前端页面专栏收录该内容

6 篇文章 0 订阅

订阅专栏

单选框的实现和获取对应的值

1. 单选框的实现

	这里主要是利用了input标签里面的一个属性radio，这里的Radio 对象代表 HTML 表单中的单选按钮。
	在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。
	单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
	在这里可以利用相同的name属性使得他们互斥

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
    价格：<br>
    <input type="radio" name="price" value=""/>不限

    <input type="radio" name="price" value="0-1500"/>0-1500

    <input type="radio" name="price" value="1500-3000"/>1500-3000

    <input type="radio" name="price" value="3000-6000"/>3000-6000

    <input type="radio" name="price" value="6000-???"/>6000以上

</body>
</html>

结果为：
在这里插入图片描述

2.获取单选框的值

根据自己的需要取消注释即可看对应的js和jq取值情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
</head>
<body>
    价格：<br>
    <input type="radio" name="price" value=""/>不限

    <input type="radio" name="price" value="0-1500"/>0-1500

    <input type="radio" name="price" value="1500-3000" checked="checked"/>1500-3000 <!--默认是选中这个-->

    <input type="radio" name="price" value="3000-6000"/>3000-6000

    <input type="radio" name="price" value="6000-???"/>6000以上

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script>
        //这里使用的是js的方法获取单选的值，不需要导入jq的包
        /*var price = document.getElementsByName("price");//这里获取的是一个数组因为是使用了name属性去寻找的

        for (var i = 0 ; i  < price.length ; i++){
            if( price[i].checked){
                // alert(price[i].checked) //这里我尝试打印一下这个判断的值以便大家了解
                alert(price[i].value)
            }
        }*/

        //这里使用的是jq的方法获取单选的值，需要导入jq的包，下面出现三个情况，都是可以的，使用的是3种不同的属性选择器，详情可以去看W3school里面的JavaScript下面的jQuery了解
        // var price = $("input:radio:checked").val();

        // var price = $("input[type='radio']:checked").val();

        // var price = $("input[name='price']:checked").val();

        // alert(price);


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

萌新贤的日常

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
单选框的实现和获取对应的值

单选框的实现和获取对应的值1. 单选框的实现这里主要是利用了input标签里面的一个属性radio，这里的Radio 对象代表 HTML 表单中的单选按钮。在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。在这里可以利用相...
复制链接

扫一扫