javascript - jQuery 在选择同一页面中具有多个表单的单选按钮时更改输入文本

Question

我想做一些像@JCOC611在这里做的事情:https://stackoverflow.com/a/5099898/3223200

您可以在其中根据单选按钮选择更改文本值

谁，我想在同一个页面上有多个表单，该怎么做？

原代码为

<input type="text" id="it" value="">
<input type="radio" name="hey" value="one">
<input type="radio" name="hey" value="two">
<input type="radio" name="hey" value="three">

<script>
$(document).ready(function(){
  $("input[type=radio]").click(function(){
     $("#it").val(this.value);
  }); 
});
</script>

此处演示:http://jsfiddle.net/jcoc611/rhcd2/1/

我想要这样的东西:

<form action="hello.php" name="form01" method="post">
<input type="hidden" name="productid" value="01" />
<input type="radio" name="price" value="1000">
<input type="radio" name="price" value="2000">
<input type="text" id="it" name="pricevalue" value="">
</form>

<form action="hello.php" name="form02" method="post">
<input type="hidden" name="productid" value="02" />
<input type="radio" name="price" value="6000">
<input type="radio" name="price" value="2400">
<input type="text" id="it" name="pricevalue" value="">
</form>

<form action="hello.php" name="form03" method="post">
<input type="hidden" name="productid" value="03" />
<input type="radio" name="price" value="500">
<input type="radio" name="price" value="700">
<input type="text" id="it" name="pricevalue" value="">
</form>

<script>
$(document).ready(function(){
  $("input[type=radio]").click(function(){
     $("#it").val(this.value);
  }); 
});
</script>

在同一页面使用多个表单，但使用相同的功能

如何做到这一点？

Answer 1

用途:

$(document).ready(function () {
    $("input[type=radio]").click(function () {
        $(this).closest('form').find("input[type=text]").val(this.value);
    });
});

<强> jsFiddle example

通过使用.closest()和.find()，您可以选择最接近所选相对单选按钮的文本输入元素。

请注意，ID必须是唯一的。