Я довольно новичок в 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 столбца. Первый столбец будет содержать переключатель начальной загрузки. Текстовое поле будет содержать значение для этого конкретного флажка. Оба типа ввода (флажок и текстовое поле) имеют идентификаторы, связанные с ними.
Вот что я хочу сделать:
Нужна помощь здесь . Когда пользователь устанавливает флажок, я хочу знать его идентификатор и текстовое поле.
Эта таблица будет иметь несколько строк, поэтому жесткое кодирование для каждой строки на основе идентификатора не является решением. Я ищу общее решение, которое выглядит так:
//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"));
});
3 ответа
Вы можете использовать метод 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"));
});
Здесь - рабочий пример.
Это должно помочь.
$(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);
});
});
Ваш код должен быть таким:
$(".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"));
});
Это рабочий плнкр
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.