Question

此代码成功打印复选框值。但是，两个输入值都显示为undefined。我该如何实现？

<tbody>
  {% for i in allData %}
    <tr class="checkRowedit">
      <td><label>{{i.0}}</label></td>
      <td><input name="component" type="text" value="{{i.1}}"></td>
      <td><input name="plans" type="text" value="{{i.2}}"></td>
      <td><input type="checkbox" value="{{i.0}}"></td>
    </tr>
  {% endfor %}           
</tbody>

$('.checkRowedit').on('change', ':checkbox', function () { 
  index = values.indexOf(this.value);
  if ($(this).is(':checked')) {
    console.log($(this).val() + ' input enabled');

    comp_temp  = $(this).children(':input[name="component"]').value;
    plan_temp = $(this).children(':input[name="plans"]').value;
  }
});

Answer 1

问题是因为'component'和'plans'输入元素不是复选框的子元素，因此DOM遍历逻辑不正确。他们是父母tr的孙子。这样，您可以结合使用closest()和find()来检索它们。

还请注意，您需要使用val()方法而不是value属性来获取它们的值。试试这个：

var $tr = $(this).closest('tr');
var comp_temp  = $tr.find(':input[name="component"]').val();
var plan_temp = $tr.find(':input[name="plans"]').val();

Answer 2

签出以下代码

$("table").on('change', '.checkRowedit', function(event){
    /* console.log(event.target.parentElement.parentElement.childrenElement) */;
  tr = $(this).closest('tr');
  component = tr.find('input[name="component"]').val();
  plans = tr.find('input[name="plans"]').val();
  console.log(component + " " + plans);
});

https://jsfiddle.net/s69nqh1w/17/

Answer 3

我建议您使用.closest('tr')获取父元素，然后使用.find()获取复选框的“兄弟姐妹”。

此外，您可以在代码中使用.val()代替.value。

工作片段：

$('.checkRowedit').on('change', ':checkbox', function() {
  // index = values.indexOf(this.value); // TAKIT: I don't understand What do you want to do with this line
  var tr = $(this).closest('tr');
  if ($(this).is(':checked')) {
    console.clear();
    console.log($(this).val() + ' input enabled');
    comp_temp = $(tr).find(':input[name="component"]').val(); // Using my tr variable and .val() instead of .value
    plan_temp = $(tr).find(':input[name="plans"]').val();
    console.log(comp_temp, plan_temp);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="checkRowedit">
      <td><label>{{i.0}}</label></td>
      <td><input name="component" type="text" value="{{i.1}}"></td>
      <td><input name="plans" type="text" value="{{i.2}}"></td>
      <td><input type="checkbox" value="{{i.0}}"></td>
    </tr>
  </tbody>
</table>

希望有帮助。

选中相应复选框后，我无法获取两个输入框的值

3 个答案: