js之radio应用实例

Posted 挑战者V

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之radio应用实例相关的知识,希望对你有一定的参考价值。

radio和checkbox还有select,可谓是前后端常用三剑客啊!特别是checkbox和select,关于这两个今天不讲,因为在下面这几篇文章,我已经比较详细的讲解了。

SpringMVC之ajax+select下拉框交互常用方式

checkbox选中并通过ajax传数组到后台接收

关于checkbox自动选中

今天主要讲解的是radio。

radio应用,主要应用是单选框,实际应用也很广,比如性别、身份认证(企业或者个人)、状态等等。

还是老规矩,代码实例讲解。

1.如何获得radio的值?

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

通过上述代码就可以获得选中radio的值

 

2.radio如何赋值并选中?

if(data.resourceRatePlan.isDefault==1){
                $(\'input:radio[name=isDefaultPlan][value="1"]\').attr("checked",true);
                    
            }else{
                $(\'input:radio[name=isDefaultPlan][value="0"]\').attr("checked",true);
                
            }
            
            //当status的值为1时,相当于是关闭状态
            if(data.resourceRatePlan.status==1){
                
                $(\'input:radio[name=status][value="1"]\').attr("checked",true);
                
            }else{
                $(\'input:radio[name=status][value="0"]\').attr("checked",true);
                
            }

上述代码即可实现

 

实际用途比较多的主要是取值和赋值。

 

从上面两个例子可以得出一个结论,就是都是通过jQuery选择器或者相关js判断来达到取值和赋值的目的。

jQuery本身就是js的封装。jQuery的宗旨,一直以来不变,就是那一句话:写的更少,做的更多。

jQuery教程可以参考:https://www.runoob.com/jquery/jquery-tutorial.html

 

另外我通常写博文也比较喜欢强调基础和原理。

下面进入,不用jQuery实现获取radio值,js和html代码示例如下:

<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>test</title>
        <script>
  
            function check_radio(){
                var chkObjs = document.getElementsByName("radio");
                for(var i=0;i<chkObjs.length;i++){
                    if(chkObjs[i].checked){
                       alert(chkObjs[i].value);
                            break;
                        }
                    }
                
            }
        </script>
    </head>

    <body>
        <form action=\'\' method=\'post\' onsubmit=\'javascript:return check_radio()\'>
            <input type=\'radio\' value=\'1\' name=\'radio\'>A
            <input type=\'radio\' value=\'2\' name=\'radio\'>B
            <input type=\'radio\' value=\'3\' name=\'radio\'>C
            <input type=\'radio\' value=\'4\' name=\'radio\'>D
            <input type=\'radio\' value=\'5\' name=\'radio\'>E


            <input type=submit value=sub >
        </form>
    </body>
</html>

 

小结:领悟好javascript,对于jQuery将会更好的理解,或许以后就可以像贤心同志那样,写一个layui前端框架。当然了框架也不是那么好写,不过框架的本质就是那些基础的升级版。

 

以上是关于js之radio应用实例的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js系列之二Vue实例

web前端开发JQuery常用实例代码片段(50个)

片段事务中的实例化错误

JS之闭包的应用

小程序 之修改radio默认样式

JQuery 之 获取 radio选中值,select选中值