取消选中复选框后如何撤消javascript命令？答案

【问题标题】：How to undo a javascript command after unchecking the checkbox?取消选中复选框后如何撤消javascript命令？
【发布时间】：2021-06-14 20:43:39
【问题描述】：

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

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>

我正在尝试：

单击“PrivateCar”单选按钮后禁用“CommercialCarWax”复选框。
单击“CommercialCar”单选按钮后禁用“PrivateCarWax”复选框。
单击“卡车”单选按钮后，禁用“CommercialCarWax”复选框和“PrivateCarWax”复选框。

【问题讨论】：

代码中某处存在语法错误
<script>...</script> 标签不属于 JavaScript 框。
只需运行Car 更改单选按钮的方法.... 同样Car 将指示类/构造函数，而不是函数。套管是有意义的。
您正在寻找event listeners。基本上你在单选按钮上设置了一个change 事件监听器，然后触发一个函数来根据新的单选值启用/禁用复选框。
这能回答你的问题吗？ How to use radio on change event?

标签： javascript html forms function if-statement

【解决方案1】：

您需要在处理单选按钮更改事件时检查您的情况。在这里玩一下你的情况。

    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>

【讨论】：

由于某种原因，我发现从 Stack Overflow 运行时它很好，但是当我从 Visual Studio 运行它时，代码不起作用。我不认为它与 Visual Studio 有关，但它很奇怪......
在 VS 中运行时遇到什么问题？我也尝试将其作为一个简单的 html 表单。它的工作。在您的情况下，可能是您的代码导致了问题？
我没有遇到任何问题，只是当我尝试运行它时它不起作用。
你能确认整个页面是否有唯一的ID吗？这可能是它不起作用的原因。在控制台中，编写类似document.querySelectorAll('yourradiobutton/classname')的查询。
它会打开网站，但如果我选择“PrivateCar”，例如，它允许我选择“CommercialCarwax”，反之亦然。

【解决方案2】：

那么，从哪里开始呢？

一般是not a good idea使用内联事件处理器。

此外，如果您将data-attributes 添加到价格的输入元素中，则更容易计算总价。

使用css-selectors 查询 DOM 元素更容易

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

考虑到前面的内容，我重写了您的 sn-p（编辑了 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>

【讨论】：