Question

有3个选择单选按钮选项和数字字段，以防有人想要选择多个单选按钮可以提供。我正在尝试在无线电值更改时将单选按钮值传递给数字字段。

这是我的html代码

<!-- this is main add to cart form -->
<form>
    <!-- and this is secondary form for radio buttons, so, only one could be selected -->
    <form class="quanform">
        <div class="pricelinewrap">
            <div class="priceline">
                <div class="pricelinecellval">
                    <input type="radio" id="quanlineradio1" value="1" name="quanline" />
                </div>
            </div>
        </div>
        <div class="pricelinewrap">
            <div class="priceline">
                <div class="pricelinecellval">
                    <input type="radio" id="quanlineradio2" value="2" name="quanline" />
                </div>
            </div>
        </div>
        <div class="pricelinewrap">
            <div class="priceline">
                <div class="pricelinecellval">
                    <input type="radio" id="quanlineradio3" value="3" name="quanline" />
                </div>
            </div>
        </div>
     </form>
    <div class="newquanfield tablecell almiddle">
        <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
    </div>
</form>

这是我的jquery代码

$("form.quanform .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function(){
    $(this).click(function(){
        var quanval = $(this).val();
        $(this).parents().find(".newquanfield input[type=number]").val(quanval);  
    });
});

没有任何反应，控制台中没有错误

Answer 1

问题完全在于您的选择器： $("form.quanform)无效，因为您的<form class="quanform">被包裹在另一个<form>内，这是无效的标记; <form> cannot嵌套在另一个<form>内。

由于“所需”标记无效，因此它实际上永远不会添加到DOM中。您可以通过 CTRL + U 查看源来确认这一点 - <form class="quanform">不存在。因此，你不能用jQuery来定位它。

您可以使用 W3 Validation service 验证您的标记，以确保您的HTML确实有效，确保您的jQuery选择器以您期望的方式工作。

对于您当前的结构，您可以省略.quanform组件，只需使用$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]")，它将基于外部 <form>元素工作（确实存在于DOM中）。

在以下示例中可以看到这一点：

$("form .pricelinewrap .priceline .pricelinecellval input[type=radio]").each(function() {
  $(this).click(function() {
    var quanval = $(this).val();
    $(this).parents().find(".newquanfield input[type=number]").val(quanval);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- this is main add to cart form -->
<form>
  <!-- and this is secondary form for radio buttons, so, only one could be selected -->
  <form class="quanform">
    <div class="pricelinewrap">
      <div class="priceline">
        <div class="pricelinecellval">
          <input type="radio" id="quanlineradio1" value="1" name="quanline" />
        </div>
      </div>
    </div>
    <div class="pricelinewrap">
      <div class="priceline">
        <div class="pricelinecellval">
          <input type="radio" id="quanlineradio2" value="2" name="quanline" />
        </div>
      </div>
    </div>
    <div class="pricelinewrap">
      <div class="priceline">
        <div class="pricelinecellval">
          <input type="radio" id="quanlineradio3" value="3" name="quanline" />
        </div>
      </div>
    </div>
  </form>
  <div class="newquanfield tablecell almiddle">
    <input type="number" min="1" size="2" class="quantity" name="quantity" id="quantity" value="2" />
  </div>
</form>

希望这有帮助！：）

将值从一个字段传递到另一个字段

1 个答案: