Jquery - 获取一行的所有内容答案

【问题标题】：Jquery - Getting all the contents of a rowJquery - 获取一行的所有内容
【发布时间】：2016-03-25 17:42:29
【问题描述】：

我对 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。

这是我想做的：

此处需要帮助：当用户切换复选框时，我想知道复选框和文本字段的“id”。

此表将包含多行，因此基于 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"));
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap checkbox

【解决方案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 是一个工作示例。

【讨论】：

谢谢。这是有效的。感谢您的快速响应。

【解决方案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);
        });
    });

【讨论】：

【解决方案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

【讨论】：