选择单选按钮选项时更改值

时间:2019-10-06 13:49:07

标签: javascript html

早上好, int A::z = 0; 有2个单选按钮选项:(customer typeConsumer)。

Business选项可以100%工作,它只是“商品价格+服务费”。

Consumer选项是问题所在。 如果“客户类型”是“业务”,则不收取任何保证金(值0)。

预先感谢您的帮助。

JavaScript:

Business
function addRow() {
        let select = document.getElementById("itemType")
        let price = 0
        let serviceCharge = 30
        if(select.value == "phone1"){
            price = 275
        }
        else if(select.value == "phone2") {
            price = 100
        }else if (select.value + serviceCharge == result) {
            result = "bond";
        }

        let data = `<td>${select.value}</td>
                    <td>$${price}</td>
                    `

                    let data1 = `$${price + serviceCharge}`

        document.getElementById("ItemDetail").innerHTML = select.value ? data : ''
        document.getElementById("bond").value = data1;
        
    }

   $('#gridRadios2').click(function() {
  $('.test') (function() {
    //Not sure what to add!!
    //If the “customer type” is “business” then no bond should be charged.
  })
})
$('#gridRadios1').click(function() {
  $('.test').show();
})

1 个答案:

答案 0 :(得分:1)

请检查此代码,它可以正常工作:
-请注意,price和serviceCharge变量现在在函数addRow()之外声明了
-请注意,我在addRow()函数中添加了一个'If'语句,以查看在显示数据之前选中了哪个单选按钮,以便我们显示正确的数据
-请注意,两个单选按钮现在都具有使用price和serviceCharge变量的点击事件
祝你好运!

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>



  <select id="itemType" name="itemType">
    <option id="phone1" value="phone1">phone1</option>
    <option id="phone2" value="phone2">phone2</option>
  </select>

  <input type="button" value="Add" onclick="addRow()" id="add"><br /><br />

  <table id="table" border="1">
    <tr>
      <th>Item</th>
      <th>Cost</th>
    </tr>
    <tr id="ItemDetail"></tr>
  </table>


  <!--Bond-->
  <div class="row">
    <div class="col-25">
      <label>Bond:</label>
    </div>
    <div class="col-75">
      <input class="test" type="text" id="bond" readonly="readonly">
    </div>
  </div>


  <!--customer type-->
  <div id="radios">
    <fieldset class="radiogroup">
      <p>Customer Type:*</p>
      <label class="form-check-label" for="gridRadios1">Consumer</label>
      <input class="check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" required checked><br>

      <label class="form-check-label" for="gridRadios2">Business</label>
      <input class="check-input1" type="radio" name="gridRadios" id="gridRadios2" value="option2" required>
    </fieldset>
  </div>


  <script>
    let price = 0;
    let serviceCharge = 30;

    function addRow() {
      let select = document.getElementById("itemType")
      if (select.value == "phone1") {
        price = 275
      } else if (select.value == "phone2") {
        price = 100
      } else if (select.value + serviceCharge == result) {
        result = "bond";
      }

      let data = `<td>${select.value}</td>
                    <td>$${price}</td>
                    `

      let data1 = 0;
      if (document.getElementById("gridRadios1").checked) {
        data1 = `$${price + serviceCharge}`
      } else if (document.getElementById("gridRadios2").checked) {
        data1 = `$${price}`
      }


      document.getElementById("ItemDetail").innerHTML = select.value ? data : ''
      document.getElementById("bond").value = data1;

    }

    $('#gridRadios2').click(function() {
      let data1 = `$${price}`;
      document.getElementById("bond").value = data1;
    })
    $('#gridRadios1').click(function() {
      let data1 = `$${price + serviceCharge}`;
      document.getElementById("bond").value = data1;
    })
  </script>


</body>

</html>