时间戳

首页 > 解决方案 > 如何获取复选框的总价值并将其传递到第二页

jquery - 如何获取复选框的总价值并将其传递到第二页

问题描述

我通过获取在 Page1.html 中使用 jquery 进行了一些计算

使用 get 函数从输入框中获取值并设置输入框中的值

通过使用设置功能。我也想获得总价值

复选框，如果检查所有，但我只得到一个复选框的值。我

还想将复选框的总值传递给 page2.html 中

输入框 13. 请帮帮我。

Page1.html

<!DOCTYPE html>
<html>
<body>

<p>Click the button to get a time-based greeting:</p>
INCOME: <input type="text" id="myinput" value="">
DEDUCTION: <input type="text" id="myinput1" value="" readonly>
GROSS INCOME: <input type="text" id="myinput2" value="" readonly>
TAX: <input type="text" id="myinput3" value=""readonly>



NET INCOME: <input type="text" id="myinput4" value="">

<button id="click1">CALCULATE NET INCOME</button><br><br>

NET INCOME: <input type="text" id="myinput5" value="">

<label>SELECT MENU:</label>
<select class="fee">
    <option>Select</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="3000">3000</option>
  </select>

<input type="radio" name="gender" value="1500" >1500 FOR MALE

<input type="radio" name="gender" value="1000" >1000 FOR FEMALE

<input type="radio" name="gender" value="500" >500 FOR OTHER

<input type="checkbox" name="car1" value="10000" >INVESTMENT ONE

<input type="checkbox" name="car1" value="20000" >INVESTMENT TWO

<input type="checkbox" name="car1" value="30000" >INVESTMENT THREE

AGRI INCOME: <input type="text" id="myinput6" value="">
OTHER SOURCE: <input type="text" id="myinput7" value="">
TOTAL INCOME: <input type="text" id="myinput8" value="">

<button id="click2">CALCULATE TOTAL INCOME</button>

<button id="click3">next</button>


<p id="demo"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("#click1").click(function a(){
        
		myfunction();
        
    });

   
function myfunction() {
var tax, tax1, tax2;
var inc = $("#myinput").val();
	alert(inc);
	 $("#myinput1").val(10000);

	 tax1 = inc - 10000;

	 $("#myinput2").val(tax1);
    	
    	if (tax1 <=250000) {
        tax = "0";
   	 } 
	
	else if (tax1 >250000 && tax1<=500000) {
	tax = (tax1 - 250000)*5/100;
	 }

	else if (tax1 >500000 && tax1<=1000000) {
	tax = 12000 + ((tax1 - 500000)*20/100);
	 }

	else { tax = 112000 + ((tax1 - 1000000)*30/100);
	 }

	$("#myinput3").val(tax);
	

	
	
	tax2 = tax1 - tax;
	

	$("#myinput4").val(tax2);
	$("#myinput5").val(tax2);
		
	
}

 $("#click2").click(function b(){

     
		myfunction1();
        
    });
	function myfunction1() {
var tax4, tax5, tax6, tax7, tax8, tax9, tax10, tax11;
	
	var ni=$("#myinput4").val();
	var fee = $(".fee").val();

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

	var ck = [];
            $.each($("input[name='car1']:checked"), function(){            
                ck.push($(this).val());
                });
alert(ck);
	var tax4 = $("#myinput6").val();
	var tax5 = $("#myinput7").val();

a=parseInt(fee);
n=parseInt(rd);
o=parseInt(ck.join(", "));
m=parseInt(ni);	
k=parseInt(tax4);
l=parseInt(tax5);
	tax6 = k + l + m + n + a + o;

	$("#myinput8").val(tax6);		

	$("#click3").click(function c(){
		window.location.href="getset-index2.html?tax7="+$('#myinput8').val()+"&tax8="+$('#myinput4').val()+"&tax9="+$(".fee").val()+"&tax10="+$("input[name='gender']:checked").val();
	});

	}
 

});
</script>

</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>


<body>
TOTAL INCOME: <input type="text" id="myinput9" value="" readonly>
NET INCOME: <input type="text" id="myinput10" value="">
FEE: <input type="text" id="myinput11" value="">
PANELTY: <input type="text" id="myinput12" value="">
INVESTMENT: <input type="text" id="myinput13" value="">
EMI CAR: <input type="text" id="myinput14" value="">
TOTAL NET INCOME: <input type="text" id="myinput15" value="">

<button id="click4">CALCULATE NET INCOME</button><br><br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

var urlParams = new URLSearchParams(window.location.search);
    tax9 = urlParams.get('tax7');
    tax10 = urlParams.get('tax8');
    tax11 = urlParams.get('tax9');
    tax12 = urlParams.get('tax10');
    tax13 = urlParams.get('tax11');
    $("#myinput9").val(tax9);   
    $("#myinput10").val(tax10);
    $("#myinput11").val(tax11); 
    $("#myinput12").val(tax12);  

$(document).ready(function(){
	
	$("#click4").click(function d(){
	

			myfunction2();
	});
		function myfunction2() {
			
var tax11, tax12, tax13;

	var gettax9 = $("#myinput9").val();
	var gettax10 = $("#myinput10").val();
	var tax12 = $("#myinput14").val();

	x=parseInt(gettax9);
	y=parseInt(gettax10);
	z=parseInt(tax12);

	tax13 = x + y + z;

	$("#myinput15").val(tax13);

}
});
</script>
</body>
</html>

标签： jquery

解决方案

您的问题在于myfunction1()该行中的功能

o = parseInt(ck.join(", "));

这只会给你第一个整数值，并会跳过逗号后的所有整数。

请改用此代码：

for (var i = 0; i < ck.length; i++) {
  if(!isNaN(ck[i])) {
  o += Number(ck[i]);
  }
}

推荐阅读