获取<input>元素值

Question

我有一个<table>和一些行(因查询运行而异(，我可以在其中单选按钮和一些<th>和一个<input>，我想捕获该<input>值以进行进一步处理，所以请指导我

我的网页代码

<tr>
    <th>
        <input type="radio" name="assignRadio">
    </th>
    <th> <?= $nearestResponders[ $i ]->get('firstName') . " " . $nearestResponders[ $i ]->get('lastName'); ?></th>
    <th> <?= $companyName; ?></th>
    <th> <?= $nearestResponders[ $i ]->get('contactNumber'); ?></th>
    <th> <?= $presentCity; ?></th>
    <th><?= $distanceInKM; ?></th>
    <input class="selectedResponder" type="hidden" value="<?= $nearestResponders[ $i ]->getObjectId(); ?>">
</tr>
</table>

我的j查询代码

$('input[name=assignRadio]').on('change',function(){
    console.log($(this).val());
    console.log($(this).next('.selectedResponder').val());
    console.log($(this).closest('.selectedResponder').val());
    console.log($(this).find('.selectedResponder').val());
});

如您所见，我尝试了一些方法来获取值，但失败了，所以请告知

Answer 1

您的问题是由于您必须遍历 DOM 才能找到目标元素的方式。它不是单选按钮的同级或父级，因此您尝试过的任何方法都不起作用。

相反，您可以使用closest()查找最近的公共父级，即tr，然后从那里find()元素，如下所示：

$('input[name=assignRadio]').on('change', function() {
  var $selectedResponder = $(this).closest('tr').find('.selectedResponder');
  console.log($selectedResponder.val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>
      <input type="radio" name="assignRadio">
    </th>
    <th>Firstname Lastname</th>
    <th>Company name</th>
    <th>Contact number</th>
    <th>Present city</th>
    <th>Distance</th>
    <input class="selectedResponder" type="hidden" value="foo">
  </tr>
  <tr>
    <th>
      <input type="radio" name="assignRadio">
    </th>
    <th>Firstname Lastname</th>
    <th>Company name</th>
    <th>Contact number</th>
    <th>Present city</th>
    <th>Distance</th>
    <input class="selectedResponder" type="hidden" value="bar">
  </tr>
</table>

Answer 2

这应该有效：

$('input[name="assignRadio"]').on('change',function(){
            console.log($('.selectedResponder').val());
        });