无法在 JQuery 中同时读取单选按钮和选择框

Posted 2023-05-08

【中文标题】无法在 JQuery 中同时读取单选按钮和选择框

【英文标题】：Unable to read radio button and select box simultaneously in JQuery

【发布时间】：2020-06-22 02:43:54

【问题描述】：

所以我手头有一个相当简单的任务。从单选按钮和选择框中读取值，将它们相乘并显示在跨度标记中。

问题是，我不能同时阅读。如果我读取一个，另一个不会发送数据。

这是我的 html：

<form class="" action="" method="post">
  <div class="form-group" required oninvalid="this.setCustomValidity('Please select a quanitity')" oninput="this.setCustomValidity('')">
    <label for="">Select purchase quantity:</label><br>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="qty" id="bachelorsRadio" value="<?php echo $price125; ?>">
      <label class="form-check-label" for="bachelorsRadio">125 grams for &#8377; <?php echo $price125; ?></label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="qty" id="mastersRadio" value="<?php echo $price250; ?>">
      <label class="form-check-label" for="mastersRadio">250 grams for &#8377; <?php echo $price250; ?></label>
    </div>
  </div>
    <div class="form-group col-md-6">
      <label for="orderquantity">Select packet quanitity:</label>
      <select class="custom-select"  id="myselect">
        <option selected>Select packet quantity</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
    <div class="col-6">
      <p> Total price: &#8377; <span class="price">0</span> </p>
    </div>
  <button type="button" class="btn col-4 btn-outline-success">Buy now!</button>
  <button type="button" class="btn col-4 btn-outline-warning">Add to cart &#x1F6D2;</button>
</form>
);

这是我的 JQuery：

$(document).ready(function()
  var amt = $('input[type=radio]:checked').val();
  var packet = $("#myselect option:selected").val();
  var final = amt*packet;
  $('.price').html(final);

我只能让单选按钮的值或选择框的值显示在我的price 范围中。此外，这需要实时发生，因此如果文本字段中也有任何更改，值也需要更改。

另外，如果您想知道 PHP echos 是我从 mysql 数据库中提取并存储在变量中的值。他们表现得很好。

如何获取单选按钮和选择框的值，将它们相乘并显示在price 范围内？

【问题讨论】：

尝试给他们不同的name标签

@MeesEgberts 没用。但这又有什么关系呢？就像我什至没有在任何地方引用这个名字

否，但如果他们有相同的name，您只能选择一个，不能同时选择两个

我明白了。他们不再有相同的名字，我仍然有同样的问题

解决了。谢谢@TobiasSchäfer

【参考方案1】：

你可以试试下面的代码：

function calculateFinal() 
  // Get the two values and parse them to numbers.
  // You can use `parseInt()` if you're only expecting integers.
  var amt = parseFloat($('input[name="qty"]:checked').val());
  var packet = parseFloat($("#myselect option:selected").val());

  // Multiply the values:
  var final = amt*packet;

  // Set the value using `.text()` as we're not adding any HTML.
  // `.text()` is safer than `.html()` as it protects against possible XSS.
  $('.price').text(final);


// Perform the calculation once the page has loaded:
$(calculateFinal);

// Listen to the change events on the radio buttons and the select:
$("input[name='qty'], #myselect").on("change", calculateFinal);