JQuery 脚本从输入框、复选框和选择元素的选项值合计值
Posted
技术标签:
【中文标题】JQuery 脚本从输入框、复选框和选择元素的选项值合计值【英文标题】：JQuery script to total values from input boxes, checkboxes and option values from select element 【发布时间】：2021-06-17 17:54:33 【问题描述】：我正在尝试编写我认为必须是一个简单的 JQuery 脚本来显示用户在订单中选择的选项的运行总和。我已经为下拉列表中的所有复选框、单选按钮和选项值分配了值，现在想在 div 中显示总和，以便用户可以看到总和。
这是我可怜的第一次尝试。它不起作用，我并不感到惊讶......只是无法完全理解为什么。
这是更新后的表单代码：
$(document).ready(function()
var baseWarranty = $("input.basewarranty").val();
var multiFlat = $("option.multiflat").toarray[];
var multiyr = $("option.multiyr").toarray[];
var newConst = $("option.newconst").toarray[];
var warrantyOptions = $("input.warrantyoptions").toarray[];
var optionsChecked = $(baseWarranty: selected, multiFlat: selected, multiyr: selected, newConst: selected, warrantyOptions: checked).val();
$(baseWarranty, multiFlat, multiyr, newConst, warrantyOptions).change(function()
if (optionsChecked)
$("#wty_option_child2").append(optionsChecked);
);
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="centercolumntd">
<label for="closingdate"><u>Closing Date</u></label><br>
<input type="date" id="closingdate" name="closingdate" required><br><br>
<label for="hometype"><u>Type of Home</u></label><br><br>
<input type="radio" id="Single Family" name="hometype" value="singlefamily" required><label for="Single Family">Single Family</label><br>
<input type="radio" id="Townhome/Condo/Mobile Home" name="hometype" value="towncondomobile"><label for="Townhome/Condo/Mobile Home">Townhome/Condo/Mobile Home</label><br>
<select form="input_form" name="multitype" id="duplex_triplex_fourplex" value="Multi-Flat Warranty Options" class="selectboxes">
<option class="multiflat" value="" selected disabled hidden>Duplex/Triplex/Fourplex</option>
<option class="multiflat" value="duplex_gold">Duplex Gold - $720</option>
<option class="multiflat" value="duplex_platinum">Duplex Platinum - $855</option>
<option class="multiflat" value="duplex_diamond">Duplex Diamond - $945</option>
<option class="multiflat" value="triplex_gold">Triplex Gold - $1040</option>
<option class="multiflat" value="triplex_platinum">Triplex Platinum - $1235</option>
<option class="multiflat" value="triplex_gold">Triplex Diamond - $1365</option>
<option class="multiflat" value="triplex_gold">Fourplex Gold - $1360</option>
<option class="multiflat" value="triplex_platinum">Fourplex Platinum - $1615</option>
<option class="multiflat" value="triplex_gold">Fourplex Diamond - $1785</option>
</select>
</td>
<td class="centercolumntd">
<label for="warrantytype"><u>Select Warranty Type</u></label><br>
<input class="basewarranty" type="radio" id="Gold" name="warrantytype" value="400" required><label for="Gold">Gold - $400</label><br>
<input class="basewarranty" type="radio" id="Platinum" name="warrantytype" value="475"><label for="Platinum">Platinum - $475</label><br>
<input class="basewarranty" type="radio" id="Diamond" name="warrantytype" value="525"><label for="Diamond">Diamond - $525</label><br>
<input class="basewarranty" type="radio" id="Sellers" name="warrantytype" value="Sellers"><label for="Sellers" value="0">Sellers Warranty - $0</label><br>
<select form="input_form" name="multiyear" id="multiyear" value="Multi Year Warranties" class="selectboxes">
<option class="multiyr" value="0" selected disabled hidden>Multi-Year Warranties</option>
<option class="multiyr" value="760" id="2yr_Gold">2yr. Gold Warranty - $760</option>
<option class="multiyr" value="1120" id="3yr_Gold">3yr. Gold Warranty - $1120</option>
<option class="multiyr" value="903" id="2yr_Platinum">2yr. Platinum Warranty - $903</option>
<option class="multiyr" value="1330" id="3yr_Platinum">3yr. Platinum Warranty - $1330</option>
<option class="multiyr" value="998" id="2yr_Diamond">2yr. Diamond Warranty - $998</option>
<option class="multiyr" value="1470" id="3yr_Diamond">3yr. Diamond Warranty - $1470</option>
</select>
<select form="input_form" name="newconstruction" id="newconstruction" value="New Construction Warranties" class="selectboxes">
<option class="newconst" value="" selected disabled hidden>New Construction Warranties</option>
<option class="newconst" value="400" id="2yr_nc_gold">2yr. Gold New Constr. - $400</option>
<option class="newconst" value="520" id "3yr_nc_gold">3yr. Gold New Constr. - $520</option>
<option class="newconst" value="660" id="4yr_nc_gold">4yr. Gold New Cons"tr. - $660</option>
<option class="newconst" value="475" id="2yr_nc_plat">2yr. Platinum New Constr. - $475</option>
<option class="newconst" value="618" id="3yr_nc_plat">3yr. Platinum New Constr. - $618</option>
<option class="newconst" value="784" id="4yr_nc_plat">4yr. Platinum New Constr. - $784</option>
<option class="newconst" value="525" id="2yr_nc_diam">2yr. Diamond New Constr. - $525</option>
<option class="newconst" value="683" id="3yr_nc_diam">3yr. Diamond New Constr. - $683</option>
<option class="newconst" value="866" id="4yr_nc_diam">4yr. Diamond New Constr. - $866</option>
</select><br>
</td>
</tr>
</table>
<label for="warrantynotes"><u>Warranty Notes - Any instructions or information about the order or payment arrangements</u></label><br>
<input type="text" id="notes" name="warrantynotes"><br><br>
<label for="options"><u>Options</u></label><br>
<div class="warranty_option_container">
<div class="wty_option_child">
<input class="warrantyoptions" type="checkbox" id="greenplus" name="optiontype[]" value="70"><label for="greenplus">$70 Green Plus</label><br>
<input class="warrantyoptions" type="checkbox" id="termite" name="optiontype[]" value="75"><label for="termite">$75 Subterranean Termite Treatment</label><br>
<input class="warrantyoptions" type="checkbox" id="freezer" name="optiontype[]" value="50"><label for="freezer">$50 Freezer-Standalone</label><br>
<input class="warrantyoptions" type="checkbox" id="wetbar" name="optiontype[]" value="25"><label for="wetbar">$25 Wet Bar Refrigerator/2nd Fridge</label><br>
<input class="warrantyoptions" type="checkbox" id="poolspa" name="optiontype[]" value="150"><label for="poolspa">$150 Pool/Spa Combo</label><br>
<input class="warrantyoptions" type="checkbox" id="addpoolspa" name="optiontype[]" value="150"><label for="addpoolspa">$150 Additional Pool or Spa</label>
</div>
<div class="wty_option_child">
<input class="warrantyoptions" type="checkbox" id="saltpool" name="optiontype[]" value="300"><label for="saltpool">$300 Salt Water Pool w/Spa Combo</label><br>
<input class="warrantyoptions" type="checkbox" id="wellpump" name="optiontype[]" value="100"><label for="wellpump">$100 Well Pump</label><br>
<input class="warrantyoptions" type="checkbox" id="septicpump" name="optiontype[]" value="75"><label for="septicpump">$75 Septic /Ejector Pump/Tank Pumping</label><br>
<input class="warrantyoptions" type="checkbox" id="waterline" name="optiontype[]" value="90"><label for="waterline">$90 External Water Line Repair</label><br>
<input class="warrantyoptions" type="checkbox" id="waterlineandsewer" name="optiontype[]" value="195"><label for="waterlineandsewer">$195 External Water/Sewer Line Repair</label><br><br>
</div>
</div><br>
<div class="warranty_option_container">
<div class="wty_option_child" id="wty_option_child1">
<h2>Warranty Total:</h2>
</div>
<div class="wty_option_child" id="wty_option_child2">
<h2></h2>
</div>
</div>【问题讨论】：
请展示你的尝试。 请看我的更新版本 感谢您的帮助。使用您的建议，我能够让它工作......成功，非常感谢您的帮助。 【参考方案1】：看看这个
这不是微不足道的。尤其是在我注意到 jQuery 之后
const getCheckedValue = fld =>
let val = $("option:checked",fld).text();
if (val) val = val.split("- $")[1]
return isNaN(val) ? 0 : +val;
$("#input_form").on("input",function(e)
const dtf = getCheckedValue("#duplex_triplex_fourplex");
const multiyear = getCheckedValue("#multiyear");
const newconstruction = getCheckedValue("#newconstruction");
const $warrentyField = $("[name=warrantytype]:checked");
const warrenty = $warrentyField.length>0 ? +$warrentyField.val() : 0;
const optiontypes = $("[name^=optiontype]:checked")
.map(function() return isNaN(this.value) ? 0 : +this.value )
.get();
const optionType = optiontypes.length>0 ? optiontypes.reduce((a,b) => a+b) : 0;
// console.log(dtf,warrenty,multiyear,newconstruction,optionType)
$("#total").text(dtf+warrenty+multiyear+newconstruction+optionType);
)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="input-form" name="textinput" id="input_form" method="POST">
<table id="formtable">
<td id="radiocell">
<table>
<tr>
<td class="centercolumntd">
<label for="closingdate"><u>Closing Date</u></label><br>
<input type="date" id="closingdate" name="closingdate" required><br><br>
<label for="hometype"><u>Type of Home</u></label><br><br>
<input type="radio" id="Single Family" name="hometype" value="singlefamily" required><label for="Single Family">Single Family</label><br>
<input type="radio" id="Townhome/Condo/Mobile Home" name="hometype" value="towncondomobile"><label for="Townhome/Condo/Mobile Home">Townhome/Condo/Mobile Home</label><br>
<select form="input_form" name="multitype" id="duplex_triplex_fourplex" value="Multi-Flat Warranty Options" class="selectboxes">
<option value="0" selected disabled hidden>Duplex/Triplex/Fourplex</option>
<option value="duplex_gold">Duplex Gold - $720</option>
<option value="duplex_platinum">Duplex Platinum - $855</option>
<option value="duplex_diamond">Duplex Diamond - $945</option>
<option value="triplex_gold">Triplex Gold - $1040</option>
<option value="triplex_platinum">Triplex Platinum - $1235</option>
<option value="triplex_gold">Triplex Diamond - $1365</option>
<option value="triplex_gold">Fourplex Gold - $1360</option>
<option value="triplex_platinum">Fourplex Platinum - $1615</option>
<option value="triplex_gold">Fourplex Diamond - $1785</option>
</select>
</td>
<td class="centercolumntd">
<label for="warrantytype"><u>Select Warranty Type</u></label><br>
<input type="radio" id="Gold" name="warrantytype" value="400" required><label for="Gold">Gold - $400</label><br>
<input type="radio" id="Platinum" name="warrantytype" value="475"><label for="Platinum">Platinum - $475</label><br>
<input type="radio" id="Diamond" name="warrantytype" value="525"><label for="Diamond">Diamond - $525</label><br>
<input type="radio" id="Sellers" name="warrantytype" value="Sellers"><label for="Sellers" value="0">Sellers Warranty - $0</label><br>
<select form="input_form" name="multiyear" id="multiyear" value="Multi Year Warranties" class="selectboxes">
<option value="0" selected disabled hidden>Multi-Year Warranties</option>
<option value="760" id="2yr_Gold">2yr. Gold Warranty - $760</option>
<option value="1120" id="3yr_Gold">3yr. Gold Warranty - $1120</option>
<option value="903" id="2yr_Platinum">2yr. Platinum Warranty - $903</option>
<option value="1330" id="3yr_Platinum">3yr. Platinum Warranty - $1330</option>
<option value="998" id="2yr_Diamond">2yr. Diamond Warranty - $998</option>
<option value="1470" id="3yr_Diamond">3yr. Diamond Warranty - $1470</option>
</select>
<select form="input_form" name="newconstruction" id="newconstruction" value="New Construction Warranties" class="selectboxes">
<option value="0" selected disabled hidden>New Construction Warranties</option>
<option value="400" id="2yr_nc_gold">2yr. Gold New Constr. - $400</option>
<option value="520" id "3yr_nc_gold">3yr. Gold New Constr. - $520</option>
<option value="660" id="4yr_nc_gold">4yr. Gold New Cons"tr. - $660</option>
<option value="475" id="2yr_nc_plat">2yr. Platinum New Constr. - $475</option>
<option value="618" id="3yr_nc_plat">3yr. Platinum New Constr. - $618</option>
<option value="784" id="4yr_nc_plat">4yr. Platinum New Constr. - $784</option>
<option value="525" id="2yr_nc_diam">2yr. Diamond New Constr. - $525</option>
<option value="683" id="3yr_nc_diam">3yr. Diamond New Constr. - $683</option>
<option value="866" id="4yr_nc_diam">4yr. Diamond New Constr. - $866</option>
</select><br>
</td>
</tr>
</table>
<label for="warrantynotes"><u>Warranty Notes - Any instructions or information about the order or payment arrangements</u></label><br>
<input type="text" id="notes" name="warrantynotes"><br><br>
<label for="options"><u>Options</u></label><br>
<div class="warranty_option_container">
<div class="wty_option_child">
<input type="checkbox" id="greenplus" name="optiontype[]" value="70"><label for="greenplus">$70 Green Plus</label><br>
<input type="checkbox" id="termite" name="optiontype[]" value="75"><label for="termite">$75 Subterranean Termite Treatment</label><br>
<input type="checkbox" id="freezer" name="optiontype[]" value="50"><label for="freezer">$50 Freezer-Standalone</label><br>
<input type="checkbox" id="wetbar" name="optiontype[]" value="25"><label for="wetbar">$25 Wet Bar Refrigerator/2nd Fridge</label><br>
<input type="checkbox" id="poolspa" name="optiontype[]" value="150"><label for="poolspa">$150 Pool/Spa Combo</label><br>
<input type="checkbox" id="addpoolspa" name="optiontype[]" value="150"><label for="addpoolspa">$150 Additional Pool or Spa</label>
</div>
<div class="wty_option_child">
<input type="checkbox" id="saltpool" name="optiontype[]" value="300"><label for="saltpool">$300 Salt Water Pool w/Spa Combo</label><br>
<input type="checkbox" id="wellpump" name="optiontype[]" value="100"><label for="wellpump">$100 Well Pump</label><br>
<input type="checkbox" id="septicpump" name="optiontype[]" value="75"><label for="septicpump">$75 Septic /Ejector Pump/Tank Pumping</label><br>
<input type="checkbox" id="waterline" name="optiontype[]" value="90"><label for="waterline">$90 External Water Line Repair</label><br>
<input type="checkbox" id="waterlineandsewer" name="optiontype[]" value="195"><label for="waterlineandsewer">$195 External Water/Sewer Line Repair</label><br><br>
</div>
</div><br>
<div class="warranty_option_container">
<div class="wty_option_child" id="wty_option_child1">
<h2>Warranty Total: <span id="total"></span></h2>
</div>
<div class="wty_option_child" id="wty_option_child2">
<h2></h2>
</div>
</div>
</td>
</tr>
</table>
</form>【讨论】：
以上是关于JQuery 脚本从输入框、复选框和选择元素的选项值合计值的主要内容，如果未能解决你的问题，请参考以下文章
如何从客户端禁用 DevExpress MVC 组合框（JS / JQuery）