获取<input>元素值

Question

我有一个<table>和一些行(取决于查询的运行情况)，在这些行中，我可以使用单选按钮、一些<th>和一个<input>，并且我希望捕获该<input>值以供进一步处理，因此请指导我。

我的HTML代码

<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>

我的jQuery代码

$('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());
        });