Question

我有一个单选按钮值（金额）和复选框值（金额）当某人单击复选框按钮金额时，已添加到单选按钮金额中。

<label><input type="checkbox" value="500"> Include Fare (Rs.500/-)</label>

<label><input type="radio" name="optradio" value="4700">Price : 4700</label>

如果客户选中此复选框，则单选按钮的值将显示为5200

Answer 1

我在您的问题中没有太多信息可以帮助您，但我创建了这个示例

<!DOCTYPE html>
<html>
<body>

<form>
  <input  onclick="check1()"   type="radio" name="check1">check1<br>
  <input  onclick="check2()"  type="radio" name="check2">check2
</form>



<script>
function check1() {//when selected check1 do this
   //todo
}
function check2() {//when selected check2 do this
    //todo
}
</script>

</body>
</html>

Answer 2

新更新

HTML：

<label><input onclick="increasePrice(this)" type="checkbox" value="500"> Include Fare (Rs.500/-)</label>

<label><input onclick="increasePrice(this)" type="checkbox" value="800"> Include Other Fare (Rs.800/-)</label>

<label><input class="price-input" type="radio" name="optradio" value="4700">Price : <span class="price">4700</span></label>

<label><input class="price-input" type="radio" name="optradio" value="2000">Price 1: <span class="price">2000</span></label>

Javascript：

function increasePrice(checkbox) {
  var increase = parseInt(checkbox.value);
  debugger;
  var price_inputs = document.getElementsByClassName("price-input");
  var price_span = document.getElementsByClassName("price");
  for(var i = 0; i < price_inputs.length; i++) {
    var price = price_inputs.item(i);
    var newValue =  parseInt(price.value);
    if(checkbox.checked){
      var newValue = newValue + increase;
    } else {
      var newValue = newValue - increase;
    }
    price_span.item(i).innerHTML = newValue;
    price.value = newValue;
  }
};

它将更新radio的文本和值，并以一种方式，然后以另一种方式，如果未选中此复选框，则会相应地降低价格。另外，它可以与多个复选框和单选按钮一起使用，而无需更改Javascript。

您可以测试here。

这是全部：

<!DOCTYPE html>
<html>
<body>

<form>
  <label><input onclick="increasePrice(this)" type="checkbox" value="500"> Include Fare (Rs.500/-)</label>
  <label><input onclick="increasePrice(this)" type="checkbox" value="800"> Include Other Fare (Rs.800/-)</label>
  <label><input class="price-input" type="radio" name="optradio" value="4700">Price : <span class="price">4700</span></label>
  <label><input class="price-input" type="radio" name="optradio" value="2000">Price 1: <span class="price">2000</span></label>
</form>



<script>
  function increasePrice(checkbox) {
    var increase = parseInt(checkbox.value);
    var price_inputs = document.getElementsByClassName("price-input");
    var price_span = document.getElementsByClassName("price");
    for(var i = 0; i < price_inputs.length; i++) {
      var price = price_inputs.item(i);
      var newValue =  parseInt(price.value);
      if(checkbox.checked){
        var newValue = newValue + increase;
      } else {
        var newValue = newValue - increase;
      }
      price_span.item(i).innerHTML = newValue;
      price.value = newValue;
    }
  };
</script>

</body>
</html>

Answer 3

您在这里找到解决方法

function handleClick(cb) {
  var cb_val = parseInt(cb.value);
  var price = parseInt(document.getElementById("radioPrice").value);
  if (cb.checked) {
    document.getElementById("radioPrice").value = price + cb_val;
    document.getElementById("priceText").innerHTML = "Price : " + (price + cb_val);
  } else {
    document.getElementById("radioPrice").value = price - cb_val;
    document.getElementById("priceText").innerHTML = "Price : " + (price - cb_val);
  }
}

<label><input type="checkbox" value="500" onclick='handleClick(this);'> Include Fare (Rs.500/-)</label>

<label><input id="radioPrice" type="radio" name="optradio" value="4700"><span id="priceText">Price : 4700</span></label>

希望这会对您有所帮助。

Answer 4

我使用了不打扰的原则，甚至将侦听器绑定到具有通用名称属性的复选框。

然后，calculateFare函数在选中的复选框中循环，并将其值添加到基本价格中。基本价格保存在我已添加到单选按钮的data attribute中。然后，将修改后的价格用作单选按钮的值，并更新显示价格。

使用此技术，您可以添加/删除复选框，而不必更新脚本。

var fareBoxes = document.querySelectorAll("[name='cbAdditional']");

//Add event listener to the check boxes
for(var i = 0; i < fareBoxes.length; i++)
{
  fareBoxes[i].addEventListener("click", calculateFare);
}

//The function attached to the event listener
function calculateFare(){
  var basePrice = parseInt(document.getElementById("price-input").dataset.baseprice, 10);
  //get selected boxes
  var checked = document.querySelectorAll("[name='cbAdditional']:checked");
  
  //Interate our checked boxes and add to the price
  for(var i = 0; i < checked.length; i++){
    basePrice += parseInt(checked[i].value,10);
  }
  
  //Set Value and display
  document.getElementById("price-input").value = basePrice;
  document.getElementById("price").innerHTML = basePrice;
  
  console.log(document.getElementById("price-input").value);
}

<form>
  <label><input  type="checkbox" value="100" name="cbAdditional"> Weekend Rate (Rs.100/-)</label>
  <label><input  type="checkbox" value="200" name="cbAdditional"> Junior Fare (Rs.200/-)</label>
  <label><input  type="checkbox" value="500" name="cbAdditional"> Include Fare (Rs.500/-)</label>
  <label><input  type="checkbox" value="800" name="cbAdditional"> Include Other Fare (Rs.800/-)</label>
  <label><input id="price-input" type="radio" data-baseprice="4700" name="optradio" value="4700">Price : <span id="price">4700</span></label>
</form>

动态更改单选按钮的值

4 个答案: