jquery获取checkbox选中值这些求和

来源：互联网发布：安全电脑炒股软件编辑：程序博客网时间：2024/05/17 22:00

注意重点：取得的值要转为数字类型(Number())

改进展示方式:(传递两个参数)

<!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>无标题文档</title>  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>    </head>    <body>  <script>  $(function(){      $("input[name='chbox']").change(function(){          var result=0;  var pv=0;        $("input[name='chbox']:checked").each(function(){        //分割取得价格        st1= $(this).val();var strs1= new Array(); //定义一数组   strs1=st1.split("|"); //字符分割pv=strs1[1];//1|100  1=100              //把价格相加得出和   result+=Number(pv);              // alert($(this).val())        });                //alert(result)        $("#tinput").val(result);          });  })    </script>    <input type="text" id="tinput"/>          <div>              <input type="checkbox" name="chbox" value="1|100"/>1              <input type="checkbox" name="chbox" value="2|200"/>2              <input type="checkbox" name="chbox" value="3|300"/>3              <input type="checkbox" name="chbox" value="4|400"/>4                </div>                </body>  </html>

展示方式0：改进型

<!doctype html>  <html>  <head>  <meta charset="utf-8">  <title>无标题文档</title>  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>    </head>    <body>  <script>  $(function(){      $("input[name='chbox']").change(function(){          var result=0;  var pv=0;        $("input[name='chbox']:checked").each(function(){               //把价格相加得出和   result+=Number($(this).val());              // alert($(this).val())        });                //alert(result)        $("#tinput").val(result);          });  })    </script>    <input type="text" id="tinput"/>          <div>              <input type="checkbox" name="chbox" value="1"/>1              <input type="checkbox" name="chbox" value="2"/>2              <input type="checkbox" name="chbox" value="3"/>3              <input type="checkbox" name="chbox" value="4"/>4                </div>                </body>  </html>

展示方式一:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>  </head><body><script>$(function(){    $("input[name='chbox']").change(function(){        var result="";        $("input[name='chbox']:checked").each(function(){               result+=$(this).val()+',';        });//        if(result!=""){//            result=result.substring(0,result.lastIndexOf(',')); //        }str=result; //这是一字符串 var strs= new Array(); //定义一数组 var sum=0;strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) {   sum+=Number(strs[i]);  // document.write(strs[i]+"<br/>"); //分割后的字符输出 }         $("#tinput").val(sum);        });})</script><input type="text" id="tinput"/>        <div>            <input type="checkbox" name="chbox" value="1"/>1            <input type="checkbox" name="chbox" value="2"/>2            <input type="checkbox" name="chbox" value="3"/>3            <input type="checkbox" name="chbox" value="4"/>4            </div>          </body></html>

展示方式二:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html>   <head>    <title> New Document </title>    <meta name="Generator" content="EditPlus">    <meta name="Author" content="">    <meta name="Keywords" content="">    <meta name="Description" content="">   </head>   <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>      <script type="text/javascript">          function go() {              var strs="";              $("input[name='checkbox']:checkbox").each(function(){                   if($(this).attr("checked")){                      strs += $(this).val()+","                  }              })             // alert(strs);              //str.split(",");              //alert(str[0]);    var sum=0;strs=strs.split(","); //字符分割 for (i=0;i<strs.length ;i++ ) {   sum= sum+Number(strs[i]);} $("#tinput").val(sum);           }      </script>   <body>    <div>      <input type="text" id="tinput" value=""/>      <input type="checkbox" name="checkbox" value="1"/> 1     <input type="checkbox" name="checkbox" value="2"/> 2     <input type="checkbox" name="checkbox" value="3"/> 3     <input type="checkbox" name="checkbox" value="4"/> 4    <input type="checkbox" name="checkbox" value="5"/> 5    <input type="button" id="test" onclick="go();" value="提交"/>    </div>   </body>  </html>

阅读全文

0 0

jquery获取checkbox选中值 这些求和

jquery获取checkbox选中值这些求和