javascript - 更改单选按钮选择不同形式的输入文本

Question

我试图在按下单选按钮时更改输入文本

它自己的表单有 5 个选项，带有多个单选按钮和输入文本

我要更改的输入文本采用不同的形式，因为在更改主表单中的输入文本时，它也应该在另一个表单中更改

我现在明白了

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

但这会改变当前表单中的输入文本

我怎样才能更改第二个表单输入文本

main form
<form action="cart.php" name="cart" id="cart" target="cart"
method="post" onsubmit="return cart();">



<input name="selector0" type="hidden" value="A">
<input name="selector0hyphen" type="hidden" value="-">

<div class="selector">
    <div class="selector">
      ccc
    </div>
    <p>
      <label>
      <input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
      TYPE : p </label>
      <br>
      <label>
        <input type="radio" name="selector1" value="K" id="selector1_1">
        TYPE : l </label>
        </p>
    <div class="selector">j</div>
    
    <p>
      <label>
      <input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
        aaa</label>
      <br>
      <label>
      <input type="radio" name="selector2" value="U" id="selector2_1">
        u</label>
    </p>
    <input name="selector2hyphen" type="hidden" value="-">
    <div class="selector">bbb</div>
    <p>
      <label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
    inches. Please use 3 digit</label></p>
        <input name="selector3hyphen" type="hidden" value="-">

<div class="selector">      wd</div>
    <p>
      <label>
      <input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
      <br>
      <label>
      <input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
      <br>
      <label>
      <input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
      <br>
      <label>
      <input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
    </p>
    <div class="selector">t Type</div>
    <p>
      <label>
      <input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
      <br>
      <label>
      <input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
    </p>
    <div class="selector">acc</div>
    <p>
      <label>
      <input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
      <br>
      <label>
      <input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
      <br>
      <label>
      <input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
      <br>
      <br>
    </p>
   	<p>
<input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
	</p>
    
      </div>
      

second form where input should change


<tbody>
			<tr>

		        <th>Model </th>
        <td style="width:100%;">
A<input name="selector1" type="text" value="_"   maxlength="3">
<input name="selector2" type="text" value="_"  maxlength="3">
<input name="selector3" type="text" value="000"  maxlength="3">
<input name="selector4" type="text" value="_" maxlength="3">
<input name="selector5" type="text" value="_"  maxlength="3">
<input name="selector6" type="text" value="_"  maxlength="3">

</td></tr>




	    </tbody>

所以现在，如果我按下单选按钮，它会以相同的形式更改输入

我需要更改第二个表单上的输入文本

例如我按下类型 p 它以第二种形式更改第一个输入文本

谢谢

Answer 1

您的代码中的问题:

find("input[type=text]").val(this.value); 将为您提供所有输入 type=text，并使用 this 更新所有这些。 value，你真正想要的是针对特定元素，所以应该像 .find("input[name="+ this.name + "][type=text]")

解决方案:

使用 .find("input[name="+ this.name + "][type=text]") 找到最后一个 name="xxxx"的元素并输入=text，这将只返回一个结果，因为组合是唯一的

想法是针对您要更新的单个输入元素，您还应该清理您的代码、属性顺序等，如果您不使用它，请删除它。

更新:更改输入更新单选按钮。

.find("input[type=radio][name="+ this.name + "][value="+ this.value + "]")

更新文本输入时，您可以将 type=radio 的输入定位为 相同的名称 和 相同的值 然后使用 .prop("checked", true) 检查它。

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

  $("input[type=text]").on('input', function() {
    $(this).closest('body').find("input[type=radio][name=" + this.name + "][value=" + this.value + "]").prop("checked", true);
  });

  //init
  $("input[type=radio]:checked").click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
main form

<div class="selector">
  <div class="selector">
    ccc
  </div>
  <p>
    <label>
      <input name="selector1" type="radio" id="selector1_0" value="J" checked="checked">
      TYPE : p </label>
    <br>
    <label>
        <input type="radio" name="selector1" value="K" id="selector1_1">
        TYPE : l </label>
  </p>
  <div class="selector">j</div>

  <p>
    <label>
      <input name="selector2" type="radio" id="selector2_0" value="G" checked="checked">
        aaa</label>
    <br>
    <label>
      <input type="radio" name="selector2" value="U" id="selector2_1">
        u</label>
  </p>
  <input name="selector2hyphen" type="hidden" value="-">
  <div class="selector">bbb</div>
  <p>
    <label><input name="selector3" type="text" id="selector3" value="000" size="5" maxlength="3">
    inches. Please use 3 digit</label></p>
  <input name="selector3hyphen" type="hidden" value="-">

  <div class="selector-column-boxhead"> wd</div>
  <p>
    <label>
      <input name="selector4" type="radio" id="selector4_0" value="S" checked="checked">
24</label>
    <br>
    <label>
      <input type="radio" name="selector4" value="X" id="selector4_1">
22</label>
    <br>
    <label>
      <input type="radio" name="selector4" value="F" id="selector4_2">
21</label>
    <br>
    <label>
      <input type="radio" name="selector4" value="T" id="selector4_3">
211</label>
  </p>
  <div class="selector-column-boxhead">t Type</div>
  <p>
    <label>
      <input name="selector5" type="radio" id="selector5_0" value="1" checked="checked">
33</label>
    <br>
    <label>
      <input type="radio" name="selector5" value="2" id="selector5_1">
3"</label>
    <br>
    <label>
      <input type="radio" name="selector5" value="3" id="selector5_2">
st m</label>
    <br>
    <label>
      <input type="radio" name="selector5" value="4" id="selector5_3">
st</label>
    <br>
    <label>
      <input type="radio" name="selector5" value="5" id="selector5_4">
mm</label>
    <br>
    <label>
      <input type="radio" name="selector5" value="6" id="selector5_5">
mmmf</label>
  </p>
  <div class="selector-column-boxhead">acc</div>
  <p>
    <label>
      <input name="selector6" type="radio" id="selector6_0" value="A" checked="checked">
None</label>
    <br>
    <label>
      <input type="radio" name="selector6" value="B" id="selector6_1">
b</label>
    <br>
    <label>
      <input type="radio" name="selector6" value="C" id="selector6_2">
bb</label>
    <br>
    <br>
  </p>
  <p>
    <input name="" type="image" value="submit" src="/images/raq.png" style="margin-left:18px;">
  </p>

</div>


second form where input should change


<tbody>
  <tr>

    <th>Model </th>
    <td style="width:100%;">
      A<input name="selector1" type="text" value="_" maxlength="3">
      <input name="selector2" type="text" value="_" maxlength="3">
      <input name="selector3" type="text" value="000" maxlength="3">
      <input name="selector4" type="text" value="_" maxlength="3">
      <input name="selector5" type="text" value="_" maxlength="3">
      <input name="selector6" type="text" value="_" maxlength="3">

    </td>
  </tr>




</tbody>