当已经在同一个页面多种形式单选按钮的选择

Question

进出口寻找到这样做@ JCOC611在这里做的jQuery更改输入文字：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 必须是唯一的。

Answer 2

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

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

jsFiddle example