我正在制作一个JavaScript和HTML项目,客户可以点击他们想要完成的服务的复选框,这将增加右侧每项服务的成本。
我目前正在使用每个项目的复选框,需要它们像单选按钮一样。在我所包含的屏幕截图中,客户不能同时在他们的汽车上安装CQuartz Finest包和Ceramic Pro Gold包。
我知道当前检查了另一个复选框后,我可以“取消选中”,但不会从总数中减去它自己。
如果你能引导我朝着正确的方向前进,那就太棒了!我通常使用HTML5,CSS3,Java和C ++编写代码。我还没有在JavaScript中做过很多。
我在此处发布了截图:https://www.dropbox.com/s/xlkh4vp70sa39wb/what-we-recommend.jpg?dl=0
以下是我目前使用的代码:
HTML
<div id="gold-package" class = "one-half-box">
<div class="option-parent"><input id ="ceramicProGoldBox" type="checkbox" name="vehicle" onclick="validateCeramicProGold()" class="paintCoatings"><h2>Ceramic Pro Gold</h2><p style="">$1695.00</p></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="ceramic-pro-9h" href="#">• 4 layers of 9H Glass Shield on all painted exterior surfaces</a></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Plastic Coating" data-geo="plastic-coating" href="#">• 1 layer of 9H Glass Shield on exterior plastics</a></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro Wheel & Tire" data-geo="wheel-coating" href="#">• 1 layer of Ceramic Pro Wheel and Caliper Coating on wheels and calipers</a></div>
<div id="tooltip" class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro Rain" data-geo="ceramic-pro-rain" href="#" >• 1 layer of Rain on all windows and glass</a></div>
<div id="tooltip" class="option-child"><a id="paint-correction" title="Paint Correction" data-geo="paint-correction" description="Test Description" href="#" >• Includes 2 stages of Paint Correction</a></div>
</div>
<div class="one-half-box-space"></div>
<div id="cquartz-finest" class = "one-half-box">
<div class="option-parent"><input id ="cquartzFinestBox" type="checkbox" name="vehicle" onclick="validateCquartzFinest()" class="paintCoatings"><h2>CQuartz Finest</h2><p style="">$700.00</p></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="cquartz-finest-paint" href="#">• 2 Layers of CQuartz Finest on all painted exterior surfaces</a></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="cquartz-finest-plastic" href="#">• 2 Layers of CQuartz Finest on exterior plastics</a></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro 9H" data-geo="wheel-coating" href="#">• 2 Layers of CQuartz Finest on Wheels & Calipers</a></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Plastic Coating" data-geo="ceramic-pro-rain" href="#">• 2 Layers of Car Pro Fly By is applied to exterior glass surfaces</a></div>
<div class="option-child"><a id="ceramic-pro-rain" title="Ceramic Pro Wheel & Tire" data-geo="light-cut" href="#">• Includes a Single Stage Paint Correction</a></div>
</div>
的JavaScript
<script type="text/javascript">
var totalPrice = 0.00;
var ceramicProGold = 1695.00;
var cquartzFinest = 700.00;
function validateCeramicProGold() {
var elCeramic = document.getElementById('ceramicProGoldOption');
var elCQuartzFinest = document.getElementById('cquartzFinestOption');
var chkboxCeramic = document.getElementById('ceramicProGoldBox');
var chkboxCquartzFinest = document.getElementById('ceramicProGoldBox');
if (chkboxCeramic.checked == false && chkboxCquartzFinest.checked == false)
{
totalPrice = totalPrice + ceramicProGold;
document.getElementById('options').innerHTML += "<li style='list-style-type: none;padding:0;' id='ceramicProGoldOption'>Ceramic Pro Gold</li>";
updatePrice();
}
else if (document.getElementById('ceramicProGoldBox').checked == false)
{
totalPrice = totalPrice - ceramicProGold;
updatePrice();
document.getElementById("ceramicProGoldOption").remove();
}
if(chkboxCquartzFinest.checked == true)
{
//chkboxCQuartzFinest.attr('checked', false);
alert("CQuartz is already checked");
}
else {}
}
function validateCquartzFinest() {
var elCeramic = document.getElementById('ceramicProGoldOption');
var elCQuartzFinest = document.getElementById('cquartzFinestOption');
var chkboxCeramic = document.getElementById('ceramicProGoldBox');
var chkboxCquartzFinest = document.getElementById('ceramicProGoldBox');
if (chkboxCeramic.checked == false)
{
totalPrice = totalPrice + cquartzFinest;
document.getElementById('options').innerHTML += "<li style='list-style-type: none;padding:0;' id='cquartzFinestOption'>CQuartz Finest</li>";
updatePrice();
}
else if (chkboxCquartzFinest.checked == false)
{
totalPrice = totalPrice - cquartzFinest;
updatePrice();
document.getElementById("cquartzFinestOption").remove();
}
if(chkboxCeramic.checked == true)
{
//alert("Ceramic Pro is already checked");
chkboxCeramic.attr('checked', false);
}
else {}
}
function updatePrice()
{
document.getElementById("totalPrice").innerHTML = totalPrice.toFixed(2);
}
$("#ceramicProGoldBox").change(validateCeramicProGold);
$("#cquartzFinestBox").change(validateCquartzFinest);
//$(".paintCoatings").change(function(){$(".paintCoatings").prop('checked',false);$(this).prop('checked',true);});
//Every checkboxes in the page
/*$('#coatings input:checkbox').click(function() {
$('#coatings input:checkbox').not(this).prop('checked', false);
});*/
</script>
答案 0 :(得分:0)
由于您已经使用了JQuery,因此您可以更轻松地完成它。使用数据属性将相关组信息添加到复选框,并在与特定选择匹配的所有复选框上使用一个更改事件(在这种情况下,我选中了具有paintCoatings
类的所有复选框)。 / p>
当复选框发生更改时,该事件将取消选中此组的所有先前选中的复选框,并将比较内部状态以更新总价(和潜在选项)
我在代码中添加了一些注释,以明确发生了什么
'use strict';
var totalPrice = 0;
function updatePrice(totalPrice) {
$('#totalPrice').html('$' + totalPrice.toFixed(2));
}
function addOption(checkboxItem) {
var s = $(checkboxItem).data('group');
$('#options').append('<li id="' + s + '">' + $(checkboxItem).data('option') + '</li>');
}
function removeOption(checkboxItem) {
var s = $(checkboxItem).data('group');
$('#' + s).remove();
}
function addPrice(checkboxItem) {
totalPrice += parseInt($(checkboxItem).data('price'));
}
function removePrice(checkboxItem) {
totalPrice -= parseInt($(checkboxItem).data('price'));
}
var lastChecked = {};
$('input.paintCoatings').on('change', function(eventSource) {
// target points to the checkbox that got clicked
var sender = eventSource.target;
if (sender) {
// we have the relevant group of data inside data-group
var group = $(sender).data('group');
// select all matching checkboxes of this group
$("[data-group='" + group + "']").each(function(index, checkbox) {
if (checkbox !== sender) {
// and deselect them if they are not the same to this sender
checkbox.checked = false;
}
});
// if this group had a previously selected checkbox
if (lastChecked[group]) {
// remove the price from the total price
removePrice(lastChecked[group]);
// remove the option from the option list
removeOption(lastChecked[group]);
// remove last selected item
delete lastChecked[group];
}
// if the freshly clicked checkbox is checked
if (sender.checked) {
// add the price
addPrice(sender);
// add the option
addOption(sender);
// save it as the currently active one for this group
lastChecked[group] = sender;
}
// update the price
updatePrice(totalPrice);
}
});
.option {
display: inline-block;
float: left;
margin: 4px;
border: solid #a0a0a0 1px;
width: 150px;
padding: 5px;
}
.option h2 {
font-size: 11px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="totalPrice">0</div>
<div id="options">
</div>
<div class="option">
<input id="ceramicProGoldBox" type="checkbox" data-group="paint" data-price="1695" data-option="Ceramic" name="vehicle" class="paintCoatings">
<label for="cermaicProGoldBox">
<h2>Ceramic Pro Gold</h2>
</label>
<p style="">$1695.00</p>
</div>
<div class="option">
<input id="cquartzFinestBox" type="checkbox" data-group="paint" data-price="700" data-option="Quartz" name="vehicle" class="paintCoatings">
<label for="cquartzFinestBox">
<h2>CQuartz Finest</h2>
</label>
<p style="">$700.00</p>
</div>
<div class="option">
<input id="ceramicProGoldBox" type="checkbox" data-group="wheels" data-price="150" data-option="19 inch wheels" name="vehicle" class="paintCoatings">
<label for="cermaicProGoldBox">
<h2>19"</h2>
</label>
<p style="">$150.00</p>
</div>
<div class="option">
<input id="cquartzFinestBox" type="checkbox" data-group="wheels" data-price="100" data-option="18 inch wheels" name="vehicle" class="paintCoatings">
<label for="cquartzFinestBox">
<h2>18"</h2>
</label>
<p style="">$100.00</p>
</div>