如何在取消选中复选框后撤消javascript命令

我正试图编写一个程序来计算在车库的价格，但我不知道如何在取消选中复选框后取消该功能。这是我的代码：

function Car() {
var value = 0;
var PrivateCar = document.getElementById("PrivateCar").value;
var CommercialCar = document.getElementById("CommercialCar").value;
var Truck = document.getElementById("Truck").value;
var ScentTree = document.getElementById("ScentTree").value;
var PrivateCarWax = document.getElementById("PrivateCarWax").value;
var CommercialCarWax = document.getElementById("CommercialCarWax").value;
if (document.form1.PrivateCar.checked == true) {
document.getElementById("Car").innerHTML = "You have a private car." + "<br />";
value += 30;
}
if (document.form1.CommercialCar.checked == true) {
document.getElementById("Car").innerHTML = "You have a commercial car" + "<br />";
value += 45;
}
if (document.form1.Truck.checked == true) {
document.getElementById("Car").innerHTML = "You have a truck" + "<br />";
value += 60;
}
if (document.form1.ScentTree.checked == true) {
document.getElementById("Extras").innerHTML = "You have chosen the addition of a scent tree" + "<br />";
value += 5;
}
if (document.form1.PrivateCarWax.checked == true) {
document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
value += 10;
}
if (document.form1.CommercialCarWax.checked == true) {
document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
value += 20;
}
document.getElementById("price").innerHTML = "The price you have to pay is: " + value + " dollars";
}

<body dir="rtl">
<form name="form1">
<h1 style="color:red">Car Washing Price List</h1>
<br />
<b>Car Type:</b>
<br />
<input type="radio" id="PrivateCar" name="CarType" /> Private Car - 30 dollars
<br />
<input type="radio" id="CommercialCar" name="CarType" /> Commercial Car - 45 dollars
<br />
<input type="radio" id="Truck" name="CarType" /> Truck - 60 dollars
<br />
<br />
<b>Extras:</b>
<br />
<input type="checkbox" id="ScentTree" /> Scent tree - 5 dollars
<br />
<input type="checkbox" id="PrivateCarWax" /> Wax for private car - 10 dollars
<br />
<input type="checkbox" id="CommercialCarWax" /> Wax for commercial car - 20 dollars
<br />
<input type="checkbox" id="TruckWax" disabled /> Wax for truck - You can't choose wax for a truck
<br />
<br />
<input type="button" id="button" value="Click to get a price" onclick="Car()" />
<p id="Car"></p>
<p id="Extras"></p>
<p id="price"></p>
</form>

我正在尝试：

禁用；CommercialCarWax"；复选框后点击"；PrivateCar；单选按钮
禁用"；PrivateCarWax"；复选框后点击"；商用车"；单选按钮
禁用"；CommercialCarWax"；复选框和"；PrivateCarWax"；复选框后点击"；卡车"；单选按钮

在处理单选按钮更改事件时，需要检查您的条件。只要在这里看看你的情况就行了。

var radioBtn = document.form1.CarType
for (var i = 0; i < radioBtn.length; i++) {
radioBtn[i].addEventListener('change', function() {
if(this.id == "PrivateCar") { disabledBox(false,true) }
else if(this.id == "CommercialCar") { disabledBox(true,false) }
else if(this.id == "Truck") { disabledBox(true,true) }    
});
}
function disabledBox(val1, val2) { 
document.getElementById("PrivateCarWax").disabled = val1;
document.getElementById("CommercialCarWax").disabled = val2;
}

以下是满足您要求的方法：

function Car() {
var value = 0;
var PrivateCar = document.getElementById("PrivateCar").value;
var CommercialCar = document.getElementById("CommercialCar").value;
var Truck = document.getElementById("Truck").value;
var ScentTree = document.getElementById("ScentTree").value;
var PrivateCarWax = document.getElementById("PrivateCarWax").value;
var CommercialCarWax = document.getElementById("CommercialCarWax").value;

if (document.form1.PrivateCar.checked == true) {
document.getElementById("Car").innerHTML = "You have a private car." + "<br />";
value += 30;
}
if (document.form1.CommercialCar.checked == true) {
document.getElementById("Car").innerHTML = "You have a commercial car" + "<br />";
value += 45;
}
if (document.form1.Truck.checked == true) {
document.getElementById("Car").innerHTML = "You have a truck" + "<br />";
value += 60;
}
if (document.form1.ScentTree.checked == true) {
document.getElementById("Extras").innerHTML = "You have chosen the addition of a scent tree" + "<br />";
value += 5;
}
if (document.form1.PrivateCarWax.checked == true) {
document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
value += 10;
}
if (document.form1.CommercialCarWax.checked == true) {
document.getElementById("Extras").innerHTML = "You have chosen the addition of Wax to a private car" + "<br />";
value += 20;
}
document.getElementById("price").innerHTML = "The price you have to pay is: " + value + " dollars";
}
var radioBtn = document.form1.CarType
for (var i = 0; i < radioBtn.length; i++) {
radioBtn[i].addEventListener('change', function() {
if(this.id == "PrivateCar") { disabledBox(false,true) }
else if(this.id == "CommercialCar") { disabledBox(true,false) }
else if(this.id == "Truck") { disabledBox(true,true) }    
});
}
function disabledBox(val1, val2) { 
document.getElementById("PrivateCarWax").disabled = val1;
document.getElementById("CommercialCarWax").disabled = val2;
}

<body dir="rtl">
<form name="form1">
<h1 style="color:red">Car Washing Price List</h1>
<br />
<b>Car Type:</b>
<br />
<input type="radio" id="PrivateCar" name="CarType" /> Private Car - 30 dollars
<br />
<input type="radio" id="CommercialCar" name="CarType" /> Commercial Car - 45 dollars
<br />
<input type="radio" id="Truck" name="CarType" /> Truck - 60 dollars
<br />
<br />
<b>Extras:</b>
<br />
<input type="checkbox" id="ScentTree" /> Scent tree - 5 dollars
<br />
<input type="checkbox" id="PrivateCarWax" /> Wax for private car - 10 dollars
<br />
<input type="checkbox" id="CommercialCarWax" /> Wax for commercial car - 20 dollars
<br />
<input type="checkbox" id="TruckWax" disabled /> Wax for truck - You can't choose wax for a truck
<br />
<br />
<input type="button" id="button" value="Click to get a price" onclick="Car()" />
<p id="Car"></p>
<p id="Extras"></p>
<p id="price"></p>
</form>

好吧，从哪里开始？

使用内联事件处理程序通常不是一个好主意。

此外，如果将数据属性添加到价格的输入元素中，则更容易计算总价。

使用css选择器查询DOM元素要容易得多

最后，您可以向文档中添加一个事件侦听器来处理不同的事件。这称为事件委派。

考虑到前面的内容，我已经重写了您的代码片段(编辑了html并将其缩短了一点(。奖金：每次做出选择时，它都会计算价格。

您应该能够弄清楚如何有条件地禁用单选按钮或复选框(提示：setAttribute('disabled', 'disabled')(。

document.addEventListener("click", handle);
function handle(evt) {
if (evt.target.id === "button" || 
evt.target.type === "radio" || 
evt.target.type === "checkbox") {
// Note: the calculation will also be triggered if 
// one of the radio buttons or checkboxes is clicked
// so you may consider ditching the button
getPrice(evt.target);
}
}
function getPrice(origin) {
let checkedRadio;

if (origin.type === "radio") {
checkedRadio = origin;
} else {
checkedRadio = document.querySelector("input[type='radio']:checked");
}

const checkedCheckboxes = document.querySelectorAll("input[type='checkbox']:checked");
if (!checkedRadio) {
return alert("Please select a Car Type");
}

let total = +checkedRadio.dataset.price;
checkedCheckboxes
.forEach(cb => total += +cb.dataset.price);
document.querySelector("#price").textContent = `Your price: $${total}`;
}

<form name="form1">
<h1 style="color:red">Car Washing Price List</h1>
<div>
<h3>Car Type:</h3>
<input type="radio" id="PrivateCar" name="CarType" data-price="30" /> Private Car - 30 dollars
<div>
<input type="radio" id="CommercialCar" name="CarType" data-price="45" /> Commercial Car - 45 dollars
</div>
</div>
<div>
<h3>Extras:</h3>
<input type="checkbox" id="ScentTree" data-price="5" /> Scent tree - 5 dollars
<div>
<input type="checkbox" id="PrivateCarWax" data-price="10" /> Wax for private car - 10 dollars
</div>
<div>
<input type="checkbox" id="CommercialCarWax" data-price="20" /> Wax for commercial car - 20 dollars
</div>
<p>
<input type="button" id="button" value="Click to get a price" /> <span id="price"></span>
</p>  
</form>

相关内容

最新更新

热门标签：