Я не могу получить значения двух полей ввода, когда установлен соответствующий флажок

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

Оформить заказ на следующий код

$("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 2

Я предлагаю вам использовать .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>

Надеюсь, это поможет.

Answer 3

Проблема в том, что элементы ввода '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();