网页中获取几个RADIO的值并相加
  • 资讯中心
  • 行业新闻相关
  • 专家建站观点
  • 建站信息百科

网页中获取几个RADIO的值并相加

来源: 飞云专业建站工作室发布时间:2016-03-01 23:25:25

我们在网站建设过程中,经常遇到需要实现的一个小功能,类似于一键报价之类的,就是有一些项目供客户选择,每个项目都有一个单价,当客户选择完项目后,自动给出这些项目的总价。下面湖南长沙网站建设公司-飞云专业建站工作室来和大家分享一个JS实现方式,代码如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<title>JQuery radio</title>

<script type="text/javascript" language="javascript" src="./img/jquery-1.6.1.min.js" ></script>

<script type="text/javascript" language="javascript">

 /*------判断radio是否有选中,获取选中的值--------*/

    $(function(){

         $("#btnSubmit").click(function(){

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

            if(val==null){

                var n1 = 0;

            }

            else{

                var n1 = val;

            }

            var val1=$('input:radio[name="text2"]:checked').val();

            if(val1==null){

                var n2 = 0;

            }

            else{

                var n2 = val1;

            }

           document.getElementById("result").value = parseInt(n1)+parseInt(n2);

 

                   

         });

     });

</script>

</head>

 

<body>


<input type="radio" name="text1" value="100" id="text1"/>主材 

<input type="radio" name="text2" value="200" id="text2"/> 基材

 = 

<input type="text" name="result" value="" readonly="true" id="result"/>  <input type="submit" value="相加"  id="btnSubmit"/>




</body>

</html>


这里的代码需要引用一个jquery的支持库。我们在此引用的是jquery-1.6.1.min.js

转载请注明出处:http://www.feiyunjz.com/news/baike/139.html  尊重原创。

注:以上内容由湖南长沙网站建设公司-飞云专业建站工作室提供。

相关文章
  • 免费咨询

    为您提供一对一解决方案
    立即咨询
  • 联系方式

    15973134570

    全国7×24小时热线服务
免费咨询
您的姓名
您的电话
您的邮箱
咨询内容
验证码 看不清楚,点击刷新
我们会尽快联系您,等待期间需要获取更多信息,请继续访问联系我们。感谢您对我们产品及服务的支持。