jquery获取checkbox选中值这些求和

最新推荐文章于 2022-04-21 17:29:23 发布

我是高手高手高高手

最新推荐文章于 2022-04-21 17:29:23 发布

阅读量2.6k

点赞数

分类专栏： jQuery JS技巧

本文链接：https://blog.csdn.net/haibo0668/article/details/76691392

版权

JS技巧同时被 2 个专栏收录

244 篇文章 3 订阅

订阅专栏

jQuery

128 篇文章 1 订阅

订阅专栏

注意重点：取得的值要转为数字类型(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" οnclick="go();" value="提交"/>  
  </div>  
 </body>  
</html>