JQuery - Получение всего содержимого строки

Question

Я довольно новичок в jquery или любой веб-технологии, если на то пошло.

Вот мой HTML код:

<form id = "featureform"> 
     <!-- Table inside the form --> 
     <table id="mytable" class="table table-striped"> 
      <!-- First Row --> 
      <tr id = "tableRow1"> 
       <td><input id="from_checkbox" class="form-input-checkbox" type="checkbox" checked 
              data-toggle="toggle" data-on="From" data-off="From"></td> 
       <td><input type="text" id="from_text" value="tester@test.com"></td> 
      </tr> 

      <!-- Second Row --> 
      <tr id = "tableRow2"> 
       <td><input id="to_checkbox" class="form-input-checkbox" type="checkbox" checked 
              data-toggle="toggle" data-on="To" data-off="To"></td> 
       <td><input type="text" id="to_text" value="myself@dummy.com"></td> 
      </tr> 
     </table> 
    </form> 

Так у меня есть таблица внутри формы. Каждая строка таблицы имеет 2 столбца. Первый столбец будет содержать bootstrap toggle. В текстовом поле будет указано значение для этого конкретного флажка. Оба типа ввода (флажок и текстовое поле) имеют идентификаторы, связанные с ними.

Вот что я хочу сделать:

необходима помощь здесь: Когда пользователь переключает флажок, я хочу знать «ID» чекбокса и текстовое поле.

В этой таблице будет несколько строк, поэтому жесткая кодировка для каждой строки на основе идентификатора не является решением. Я ищу для общего решения, которое выглядит следующим образом:

//form-input-checkbox is the class name assigned for every checkbox. So we monitor any events coming from these 
// checkboxes, and do the magic 
$(".form-input-checkbox").change(function(){ 
    // Extract the id of the checkbox 
    // Extract the id of the textfield in this row 
    console.log($(this).closest("tr")); 
}); 

Answer 1

Вы можете использовать JQuery attr() метод, чтобы получить значение свойства ID. Чтобы получить ссылку на текстовое поле, сначала используйте метод closest() для получения ссылки на внешний tr и используйте метод find() для получения поля ввода.

Это должно сработать.

$(".form-input-checkbox").change(function(){ 
    var _this=$(this); 

    alert(_this.attr("id")); 
    alert(_this.closest("tr").find("input[type='text']").attr("id")); 
}); 

Here - рабочий образец.

Answer 2

Это должно сделать трюк.

$(document).ready(function() { 
     $("input:checkbox[data-toggle='toggle']").change(function() { 
      var $checkbox = $(this); 

      var checkboxId = $checkbox.attr("id"); 
      var inputId = $checkbox.parent().next("td").find("input:text").attr("id"); 

      console.log(checkboxId); 
      console.log(inputId); 
     }); 
    }); 

Answer 3

ваш код должен быть таким:

$(".form-input-checkbox").change(function(){ 
    // Extract the id of the checkbox 
    console.log($(this).attr("id")); 
     // Extract the id of the textfield in this row 
    console.log($(this).closest("tr").find("input[type='text']").attr("id")); 

}); 

это working plnkr