Question

我希望像@ JCOC611这样做：https://stackoverflow.com/a/5099898/3223200

您可以根据RADIO BUTTON选择更改TEXT值

有谁，我想在同一页面上有几个表格，怎么办呢？

原始代码是

<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 必须是唯一的。

Answer 2

如果您使用siblings()，请少一点代码。

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

jsFiddle example

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

2 个答案: