根据选择选项计算输入值

  • 本文关键字:计算 选项 选择 jquery html
  • 更新时间 :
  • 英文 :


有人知道一个链接可以帮助我学习如何执行以下操作吗。我在谷歌上搜索过寻求帮助,但找不到具体的答案。

我有以下设置。

<div class="information">
<input class="name" type="text" placeholder="Name">
<input class="income" id="input_1_income" type="text" placeholder="After Tax Income">
<select class="option">
    <option>Week 1</option>
    <option>Week 2</option>
</select>
</div>

我的页面上有6个。带有占位符"税后收入"的输入都有不同的ID;数字从1变为6。

我试图做的是,根据本周的选择选项(第1周或第2周),将输入到输入中的数字相加,然后答案将显示在以下输入之一中。

<div id="div2">
    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Week 1</label>
    </div>
    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Week 2</label>
    </div>
    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Fortnightly</label>
    </div>
    <div class="time">
    <input class="finance" type="text"> <br>
    <label>Yearly</label>
    </div>
</div>

因此,基本上,第1周的所有值都将被添加在一起并显示在第1周输入中,第2周的所有数值都将被相加并显示在输入中。然后我需要一起计算第1周和第2周,并将其显示在每两周输入中,然后将每两周的输入乘以26,并将答案显示在年度输入中。

我一直在寻找一些jQuery来帮助解决这个问题,但没有用。我是jQuery的新手,所以指导正确的链接或阅读材料将是一件幸事。

谢谢。

下面是一个开始的示例:

jsFiddle玩

$('select').change(function(){
		updateDiv2();
});
function updateDiv2(){
	wSel=0, ati=0, wk1=0, wk2=0;
	$('select').each(function(){
			ati = $(this).prev().val(); //.income
			ati = (ati>0)?ati:0; //if empty, make value zero (prevent NaN)
			if (this.value.split(' ')[1] == 1){
				wk1 = parseInt(wk1) + parseInt(ati);
			}else{
				wk2 = parseInt(wk2) + parseInt(ati);
			}
			$('#ttl_wk1').val(wk1);
			$('#ttl_wk2').val(wk2);
	});
}
.time {overflow:hidden;}
.time input{float:left;}
.time label{float:left;width:80px;text-align:right;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="information">
	<input class="name" type="text" placeholder="Name">
	<input class="income" id="input_1_income" type="text">
	<select class="option">
		<option>Week 1</option>
		<option>Week 2</option>
	</select>
</div>
<div class="information">
	<input class="name" type="text" placeholder="Name">
	<input class="income" id="input_1_income" type="text">
	<select class="option">
		<option>Week 1</option>
		<option>Week 2</option>
	</select>
</div>
<div class="information">
	<input class="name" type="text" placeholder="Name">
	<input class="income" id="input_1_income" type="text">
	<select class="option">
		<option>Week 1</option>
		<option>Week 2</option>
	</select>
</div>
<div id="div2">
	<div class="time">
		<label>Week 1</label>
		<input id="ttl_wk1" class="finance" type="text"> <br>
	</div>
	<div class="time">
		<label>Week 2</label>
		<input id="ttl_wk2" class="finance" type="text"> <br>
	</div>
	<div class="time">
		<label>Fortnightly</label>
		<input id="ttl_fn" class="finance" type="text"> <br>
	</div>
	<div class="time">
		<label>Yearly</label>
		<input id="ttl_yr" class="finance" type="text"> <br>
	</div>
</div>

最新更新