我有一张机票预订单。这需要旅行者的数量。我创建了3个文本框来记录旅行者的号码。它工作得很好,但问题是当用户增加或减少每个文本框中的旅行者数量时,我想同时显示主文本框中所有3个文本框的计数。我该怎么做?这是我的片段:
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var oldValue = $button.closest("ul").prev().val();
if ($button.text() == "+") {
var newVal = parseInt(oldValue) +1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$button.closest("ul").prev().val(newVal);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" class="main" value="1" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<label>
Children
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<label>
Infants
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
</body>
</html>
最佳答案
在button中,单击event在所有traveler文本框中迭代每个循环以获取travelers号码,并添加乘客以计算总乘客数,并将其放置在主文本框中。
//Place a hidden field in the form
<input type="hidden" name="hidden_travelers" id="hidden_travelers">
//place this code in button click event
var total_value = 0;
$(".cat_textbox").each(function(){
total_value += parseInt($(this).val());
});
$(".main").val(total_value);
//Assign total travelers to the hidden field
$("#hidden_travelers").val(total_value);
请检查工作片段以获得更多理解。
$(function() {
$(".button-click a").on("click", function() {
var $button = $(this);
var oldValue = $button.closest("ul").prev().val();
if ($button.text() == "+") {
var newVal = parseInt(oldValue) +1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseInt(oldValue - 1);
} else {
newVal = 0;
}
}
$button.closest("ul").prev().val(newVal);
//Calculate total travellers from all traveller textbox.
var total_value = 0;
//Loop through all the traveller textboxes
$(".cat_textbox").each(function(){
//Make addition of travellers from all the three textboxes
total_value += parseInt($(this).val());
});
//Assign the total traveller number to main textbox
$(".main").val(total_value);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="0" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<label>
Children
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<label>
Infants
<input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
</body>
</html>
关于javascript - 如何在主文本框值中显示最终结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40189118/