使用 jquery 仅选择下一个

Use jquery to select only the next one

本文关键字:下一个 选择 jquery 使用      更新时间:2023-09-26

我需要一些帮助来弄清楚。我有一个按钮收音机,当选中此按钮时,他旁边的框必须更改 id(是 ID 不是类,绝对需要它是 ID)

<table>
<tr>
  <td>
    <input type="radio" class="attribute_radio" name="contenance" />
 </td>
 <td><a href="">A super link</a>
 </td>
 <td>                       
    <input type="number" name="qty" class="text" size="2" maxlength="3"/>
 </td>
</tr>
<tr>
   <td>
    <input type="radio" class="attribute_radio" name="contenance" />
 </td>
 <td><a href="">A super 2nd link</a>
 </td>
 <td>                       
    <input type="number" name="qty" class="text" size="2" maxlength="3"/>
 </td>
</tr>
</tr>

但是使用我编写的脚本,它将 ID 应用于所有数字框,而我只想要按钮单选按钮旁边的唯一一个

$(document).ready(function(){
$("input[type='radio']").click(function(){
    $("input[type='number']").attr('id', 'quantity_wanted');
});
});                                 

http://jsfiddle.net/micheler/y4jrotkc/4/

首先,id 必须是唯一的。我最愿意用类代替。如果检查无线电,我创建它以更改输入的 id:

$('input[type=radio]').click(function() {
  //remove all id from input number
  $('input[type=number]').removeAttr('id');
  //check if radio is checked and apply id to input number next to it
  if($(this).prop("checked"))
    $(this).next().attr('id', 'quantity_wanted')
});
#quantity_wanted {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page_navigation1">next</div>
<button id="add">Add</button>
<button id="remove">Remove</button>
<p>
  <input type="radio" class="attribute_radio" name="contenance" />
  <input type="number" id="" name="qty" class="text" size="2" maxlength="3" />
</p>
<p>
  <input type="radio" class="attribute_radio" name="contenance" />
  <input type="number" name="qty" class="text" size="2" maxlength="3" />
</p>