这是我的HTML-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register for Full Stack Conf</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<span>Register for</span>
<h1>Full Stack Conf</h1>
</header>
<form action="index.html" method="post">
<fieldset>
<legend>Basic Info</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email">
<label>Job Role</label>
<select id="title" name="user_title">
<option value="full-stack js developer">Full Stack JavaScript Developer</option>
<option value="front-end developer">Front End Developer</option>
<option value="back-end developer">Back End Developer</option>
<option value="designer">Designer</option>
<option value="student">Student</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset class="shirt">
<legend>T-Shirt Info</legend>
<div>
<label for="size">Size:</label>
<select id="size" name="user_size">
<option value="small">S</option>
<option value="medium" selected>M</option>
<option value="large">L</option>
<option value="extra large">XL</option>
</select>
</div>
<div>
<label for="design">Design:</label>
<select id="design" name="user_design">
<option>Select Theme</option>
<option value="js puns">Theme - JS Puns</option>
<option value="heart js">Theme - I ♥ JS</option>
</select>
</div>
<div id="colors-js-puns" class="">
<label for="color">Color:</label>
<select id="color">
<option value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option>
<option value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option>
<option value="gold">Gold (JS Puns shirt only)</option>
<option value="tomato">Tomato (I ♥ JS shirt only)</option>
<option value="steelblue">Steel Blue (I ♥ JS shirt only)</option>
<option value="dimgrey">Dim Grey (I ♥ JS shirt only)</option>
</select>
</div>
</fieldset>
<fieldset class="activities">
<legend>Register for Activities</legend>
<label><input type="checkbox" name="all"> Main Conference — $200</label>
<label><input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
<label><input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100</label>
<label><input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100</label>
<label><input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100</label>
<label><input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100</label>
</fieldset>
<fieldset>
<legend>Payment Info</legend>
<label for="payment">I'm going to pay with:</label>
<select id="payment" name="user_payment">
<option value="select_method">Select Payment Method</option>
<option value="credit card">Credit Card</option>
<option value="paypal">PayPal</option>
<option value="bitcoin">Bitcoin</option>
</select>
<div id="credit-card" class="credit-card">
<div class="col-6 col">
<label for="cc-num">Card Number:</label>
<input id="cc-num" name="user_cc-num" type="text">
</div>
<div class="col-3 col">
<label for="zip">Zip Code:</label>
<input id="zip" name="user_zip" type="text">
</div>
<div class="col-3 col">
<label for="cvv">CVV:</label>
<input id="cvv" name="user_cvv" type="text">
</div>
<label>Expiration Date:</label>
<select id="exp-month" name="user_exp-month">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
</select>
<select id="exp-year" name="user_exp-year">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div>
<p>If you selected the PayPal option we'll take you to Paypal's site to set up your billing information, when you click “Register” below.</p>
</div>
<div>
<p>If you selected the Bitcoin option we'll take you to the Coinbase site to set up your billing information. Due to the nature of exchanging Bitcoin, all Bitcoin transactions will be final.</p>
</div>
</fieldset>
<button type="submit">Register</button>
</form>
</div>
</body>
<script src="js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>
</html>
“活动”类列出了活动及其美元价值。我已经尝试创建总美元变量，并且一旦检查了输入名称，就创建了+ =变量多少美元，但是我基于“是：在应用于整个列表的on change函数中检查了：选中并检查了其他内容，它重新添加了已经被检查的货币值的第一项内容，因此，如果选中了第一类，则显示100，然后单击另一个，然后转到300，再次添加第一类。
这是我的jQuery
$(document).ready(function() {
//append the total dollars display under activities and hide it until clicked
var $TotalDollars = 0;
var $TotalDollarsDisplay = $('<div></div>');
$('.activities').append($TotalDollarsDisplay);
$($TotalDollarsDisplay).hide();
//checkbox needs to show unique dates and times and disable duplicates
$(".activities").find("input:checkbox").change(function() {
//variables for activity input names
var $jsFrameworks = $("input[name='js-frameworks']");
var $Express = $("input[name='express']");
var $jsLibs = $("input[name='js-libs']");
var $Node = $("input[name='node']");
var $MainConf = $("input[name='all']");
var $Npm = $("input[name='npm']");
var $BuildTools = $("input[name='build-tools']");
var $CheckedActivities = $(".activities").find('input:checkbox:checked').length;
console.log($CheckedActivities);
//Disable duplicate times scheduled
if (($jsFrameworks).is(':checked')) {
($Express).prop('disabled', true);
} else {
($Express).prop('disabled', false);
}
if (($Express).is(':checked')) {
($jsFrameworks).prop('disabled', true);
} else {
($jsFrameworks).prop('disabled', false);
}
if (($jsLibs).is(':checked')) {
($Node).prop('disabled', true);
} else {
($Node).prop('disabled', false);
}
if (($Node).is(':checked')) {
($jsLibs).prop('disabled', true);
} else {
($jsLibs).prop('disabled', false);
}
//add up the total dollars for each activity
//Adding the non duplicate workshops to the total
});
});
有人可以给我一些如何执行此操作的见解吗，如果选中了至少一个，则总数仅显示在复选框下方。
最佳答案
这不是很漂亮，但是您可以使用jquery和一些数组函数像这样计算总数
$(".activities input:checkbox:checked")
// Get the text from the parent
.map(function(idx, el) {
return $(el).parent().text();
})
// convert the jquery object to an array
.toArray()
// extract the value from the string using regex
.map(function(item) {
var match = item.match(/\$(\d+)/);
return parseInt(match[1]);
})
// calculate the total with reduce
.reduce(function(cur, next) {
return cur + next;
});
示例在这里：https://jsbin.com/gaposeyoja/edit?js,output
关于javascript - 尝试编写代码以汇总复选框标签文本中的美元值(value)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37626084/