js之radio应用实例

简介: radio和checkbox还有select,可谓是前后端常用三剑客啊!特别是checkbox和select,关于这两个今天不讲,因为在下面这几篇文章,我已经比较详细的讲解了。SpringMVC之ajax+select下拉框交互常用方式checkbox选中并通过ajax传数组到后台接收关于checkbox自动选中今天主要讲解的是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前端框架。当然了框架也不是那么好写,不过框架的本质就是那些基础的升级版。

 

目录
相关文章
|
1月前
|
开发框架 前端开发 JavaScript
使用JavaScript、jQuery和Bootstrap构建待办事项应用
使用JavaScript、jQuery和Bootstrap构建待办事项应用
13 0
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包:理解其原理与实际应用
探索JavaScript中的闭包:理解其原理与实际应用
19 0
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
23 0
|
10天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
29天前
|
开发框架 JavaScript 前端开发
描述JavaScript事件循环机制,并举例说明在游戏循环更新中的应用。
JavaScript的事件循环机制是单线程处理异步操作的关键,由调用栈、事件队列和Web APIs构成。调用栈执行函数,遇到异步操作时交给Web APIs,完成后回调函数进入事件队列。当调用栈空时,事件循环取队列中的任务执行。在游戏开发中,事件循环驱动游戏循环更新,包括输入处理、逻辑更新和渲染。示例代码展示了如何模拟游戏循环,实际开发中常用框架提供更高级别的抽象。
14 1
|
1月前
|
JavaScript 前端开发
HTML JS 应用
HTML JS 应用
19 3
|
1月前
|
JavaScript 前端开发 算法
Vue.js的单向数据流:让你的应用更清晰、更可控
Vue.js的单向数据流:让你的应用更清晰、更可控
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析:nextTick 原理与应用
Vue.js 深度解析:nextTick 原理与应用
|
1月前
|
Web App开发 JavaScript 前端开发
深入浅出:Node.js 在后端开发中的应用与实践
【2月更文挑战第13天】本文旨在探讨Node.js这一流行的后端技术如何在现代Web开发中被应用以及它背后的核心优势。通过深入分析Node.js的非阻塞I/O模型、事件驱动机制和单线程特性,我们将揭示其在处理高并发场景下的高效性能。同时,结合实际开发案例,本文将展示如何利用Node.js构建高性能、可扩展的后端服务,以及在实际项目中遇到的挑战和解决方案。此外,我们还将讨论Node.js生态系统中的重要工具和库,如Express.js、Koa.js等,它们如何帮助开发者快速搭建和部署应用。通过本文的探讨,读者将获得对Node.js在后端开发中应用的深入理解,以及如何有效利用这一技术来提升开发效率
101 2
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
27 0