问题
我正在 Google 表单上设置 radio 输入的样式，但单击标签 .button__form 应选择实际的 input[type="radio] 并添加类 is--selected 到标签。但是，如果我不单击实际的圆圈，则不会计算 totalAmount，这是一个问题。
已解决 - 还有一个问题是，目前出价的 totalAmount 显示为 $Nan 而不是实际数字。
脚本.js
/*-------------------------------------
STEP ONE: PLACE BID
--------------------------------------*/
$.ajax({
url: "https://sheetsu.com/apis/4a8eceba",
method: "GET",
dataType: "json"
}).then(function(spreadsheet) {
/*-------------------------------------
SUM BIDS IN ARRAY
--------------------------------------*/
var arr = spreadsheet.result;
var arrSum = 0;
for (i = 0; i < arr.length; i++) {
arrSum += parseInt(arr[i].Bids);
}
// Print current bid
// var currentBid = parseInt(spreadsheet.result.pop().Bids);
var currentBid = arrSum;
$(".current__amount").html("$" +currentBid);
var baseAmount = 0;
var totalAmount = baseAmount;
var counterArray = [];
$('.button__form').on('click', function() {
var value = $(this).val();
if ($(this).hasClass('is--selected')) {
$(this).removeClass('is--selected');
$(".check--one").css("color", "#ccc");
$(".new__amount").css("margin-left", 10 + "px");
$(".bids__dollar").addClass("is--hidden");
totalAmount = parseInt(totalAmount) - parseInt(value);
counterArray.forEach(function (count) {
if (count && count.reset) {
count.reset();
}
});
$('.total__amount').text("---");
} else {
$(".button__form").removeClass('is--selected');
$(this).addClass('is--selected');
$(".check--one").css("color", "#ffdc00");
totalAmount = currentBid; // Reset totalAmount to baseAmount
totalAmount = parseInt(totalAmount) + parseInt(value);
$('.total__amount').html("$" + totalAmount); // Problem line?
$(".bids__dollar").removeClass("is--hidden");
$(".new__amount").css("margin-left", 0 + "px");
// CountUp
$(function() {
var options = {
useEasing : true,
useGrouping : true,
separator : '',
decimal : '',
prefix : '',
suffix : ''
};
var count = new CountUp("count", 0, totalAmount, 0, 1.5, options);
count.start();
counterArray.push(count);
});
}
});
});
index.html(表单片段)
<section class="bids clearfix">
<div class="bids__info">
<div class="bids__step bids--one">
<h2>Step One</h2>
<div class="bids__checkmark">
<i class="fa fa-check check--one"></i>
</div>
<p class="bids__note">Pick one of the amounts below to add to the current bid.</p>
<!-- Form begins here -->
<form action="https://docs.google.com/a/andrewnguyen.ca/forms/d/1Dtw6KRUS-4y-C8DXB2d-CTHT_FOBrO9v_ZXZFC4oxxU/formResponse" method="POST">
<div class="buttons clearfix" name="entry.1455057699">
<ul class="ss-choices" role="radiogroup" aria-label="Bids"><li class="ss-choice-item"><label class="button__form button__one" for="group_1455057699_1"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="10" id="group_1455057699_1" role="radio" class="ss-q-radio" aria-label="10" required="" aria-required="true"></span>
<span class="ss-choice-label">$10</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__two" for="group_1455057699_2"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="25" id="group_1455057699_2" role="radio" class="ss-q-radio" aria-label="25" required="" aria-required="true"></span>
<span class="ss-choice-label">$25</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__three" for="group_1455057699_3"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="50" id="group_1455057699_3" role="radio" class="ss-q-radio" aria-label="50" required="" aria-required="true"></span>
<span class="ss-choice-label">$50</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__four" for="group_1455057699_4"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="100" id="group_1455057699_4" role="radio" class="ss-q-radio" aria-label="100" required="" aria-required="true"></span>
<span class="ss-choice-label">$100</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__five" for="group_1455057699_5"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="250" id="group_1455057699_5" role="radio" class="ss-q-radio" aria-label="250" required="" aria-required="true"></span>
<span class="ss-choice-label">$250</span>
</label></li> <li class="ss-choice-item"><label class="button__form button__six" for="group_1455057699_6"><span class="ss-choice-item-control goog-inline-block"><input type="radio" name="entry.1455057699" value="500" id="group_1455057699_6" role="radio" class="ss-q-radio" aria-label="500" required="" aria-required="true"></span>
<span class="ss-choice-label">$500</span>
</label></li></ul>
</div><!-- /.buttons -->
<div class="bids__amounts">
<div class="bids__amount bids__current">
<p class="bids__note">The last bid was</p>
<h4 class="current__amount">---</h4>
</div>
<div class="bids__amount bids__new">
<p class="bids__note">Your bid will be</p>
<h4 class="bids__dollar is--hidden">$</h4><h4 class="new__amount total__amount" id="count">---</h4>
</div><!-- /.bids__amount -->
</div><!-- /.bids__amounts -->
</div>
<div class="bids__step bids--two">
<h2 class="bids__form">Step Two</h2>
<div class="bids__checkmark">
<i class="fa fa-check check--two"></i>
</div>
<p class="bids__note bids__warning">Fill out the form below. Fields with an asterisk <span class="form__asterisk">(*)</span> are mandatory.
<fieldset class="form__wrapper">
<div class="input__row">
<legend>Full Name</legend>
<label for="first-name">Full Name <span class="form__asterisk">*</span></label>
<input class="input__full" id="first-name" name="entry.993143629" type="text" required="" aria-required="true" autocomplete="off">
<legend>Address*</legend>
<label for="mailing-address-1">Address <span class="form__asterisk">*</span></label>
<input class="input__address" class="form__mailing" id="mailing-address-1" name="entry.703646201" type="text" required="" aria-required="true" autocomplete="off">
</div>
<div class="input__row">
<div class="input__group input--half input__group--city">
<label for="city">City <span class="form__asterisk">*</span></label>
<input class="input__city" id="city" name="entry.250562623" type="text" placeholder="Brandon" required="" aria-required="true" autocomplete="off">
</div>
<div class="input__group input--quarter input__group--province">
<label for="province">Province <span class="form__asterisk">*</span></label>
<select name="entry.1321194614" class="input__province" aria-label="Province " aria-required="true" required=""><option value=""></option>
<option value="" disabled> - Provinces - </option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon">Yukon</option>
<option value="" disabled> - States - </option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="District Of Columbia">District Of Columbia</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
<option value="Hawaii">Hawaii</option>
<option value="Idaho">Idaho</option>
<option value="Illinois">Illinois</option>
<option value="Indiana">Indiana</option>
<option value="Iowa">Iowa</option>
<option value="Kansas">Kansas</option>
<option value="Kentucky">Kentucky</option>
<option value="Louisiana">Louisiana</option>
<option value="Maine">Maine</option>
<option value="Maryland">Maryland</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Michigan">Michigan</option>
<option value="Minnesota">Minnesota</option>
<option value="Mississippi">Mississippi</option>
<option value="Missouri">Missouri</option>
<option value="Montana">Montana</option>
<option value="Nebraska">Nebraska</option>
<option value="Nevada">Nevada</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New Jersey">New Jersey</option>
<option value="New Mexico">New Mexico</option>
<option value="New York">New York</option>
<option value="North Carolina">North Carolina</option>
<option value="North Dakota">North Dakota</option>
<option value="Ohio">Ohio</option>
<option value="Oklahoma">Oklahoma</option>
<option value="Oregon">Oregon</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="Rhode Island">Rhode Island</option>
<option value="South Carolina">South Carolina</option>
<option value="South Dakota">South Dakota</option>
<option value="Tennessee">Tennessee</option>
<option value="Texas">Texas</option>
<option value="Utah">Utah</option>
<option value="Vermont">Vermont</option>
<option value="Virginia">Virginia</option>
<option value="Washington">Washington</option>
<option value="West Virginia">West Virginia</option>
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option></select>
</select>
</div>
<div class="input__group input--quarter input__group--zip">
<label for="zip">Postal Code <span class="form__asterisk">*</span></label>
<input class="input__zip" id="zip" name="entry.1010716867" type="text" required="" aria-required="true" autocomplete="off">
</div>
</div>
<div class="input__row">
<div class="input__group input--half input__group--email">
<legend>Contact</legend>
<label for="first-name">Email <span class="form__asterisk">*</span></label>
<input class="input__email" id="email" name="entry.1265248848" type="text" autocapitalize="off" autocorrect="off" required="" aria-required="true" autocomplete="off">
</div>
<div class="input__group input--half input__group--phone">
<label for="last-name">Phone Number <span class="form__asterisk">*</span></label>
<input class="input__number" id="number" name="entry.433465949" type="text" required="" aria-required="true" autocomplete="off">
</div>
</div>
<div class="input__group input__checkbox">
<ul class="checkbox__list">
<li>
<input class="checkbox" type="checkbox" name="checkbox" value="checkbox" autocomplete="off">
<label for="checkbox" class="form__notifications"><i class="fa fa-bell"></i> Receive an SMS notification when you are outbid</label>
</li>
</ul>
</div>
</fieldset>
<button class="button__submit is--disabled">Submit</button>
</form>
</div>
</div>
</section>
最佳答案
在这里，您尝试从具有 button__form 类的标签中获取值，这是错误的，您必须从该标签内的单选按钮获取值，因此请尝试以下代码来获取值其他代码将保持原样。
$('.button__form').on('click', function() {
var value = $(this).find("input[type='radio']").val();
});
它可能对你有帮助。
关于javascript - 单击标签应选择 radio 输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34447651/