Question

我有一个用户详细信息列表，可以选择哪个选项，as shown here - Fiddle，现在我想获取所选用户并获取相应的文本框值。

为了获得选定的用户，我有一个简单的jQuery： -

var selected = new Array();
$('.dummy-class ').click(function (e) {
    if (this.checked) {
        selected.push(this);
    } else {
        var index = selected.indexOf(this);
        selected.splice(index, 1);
    }
    console.log(selected);
});

现在，我很困惑如何选择里面的元素。

//Access values of selected elements while saving and creating OBJECT
$('.SaveDetails').click(function () {
    console.log(selected);
    var tempArray = [];
    $.each(selected, function (index, value) {
        console.log($(this).find("input:first").attr("value"));//Its not working

        var temp = {};
        temp.FirstName = $(this).find("input:first").attr("value");"));//Its not working
        tempArray.push(temp);
    });
    console.log(tempArray);
});

Answer 1

您可以找到复选框所在的.panel元素，然后找到名称为first的输入元素。

var selected = new Array();
$('.dummy-class ').change(function (e) {
    if (this.checked) {
        selected.push(this);
    } else {
        var index = selected.indexOf(this);
        selected.splice(index, 1);
    }
    console.log(selected);
    var $panel = $(this).closest('.panel');
    console.log($panel.find('input[name="first"]').val())
});

您必须确保所有名称字段都具有名称first

演示：Fiddle

Answer 2

如果您尝试使用内部$('.SaveDetails').click(function ()处理程序，请尝试以下操作：

$('.SaveDetails').click(function () {
    console.log(selected);
    var tempArray = [];
    $.each(selected, function (index, value) {
        console.log($(this).closest('.panel').closest('.panel').find("input:first").val());//Its not working

        var temp = {};
        temp.FirstName = $(this).closest('.panel').find("input:first").val();"));//Its not working
        tempArray.push(temp);
    });
    console.log(tempArray);
});

访问与复选框有关的子元素

2 个答案: