选中复选框时jQuery检索数据

Posted 2023-02-25

【中文标题】选中复选框时jQuery检索数据

【英文标题】：jQuery to retreve data when checkbox is checked

【发布时间】：2011-07-26 12:07:29

【问题描述】：

我没有使用表格，而是使用以下 html 显示第 1 列中的复选框、第 2 列中的名称和第 3 列中的电子邮件地址。HTML 如下所示：

<div class="rowLight">
<div class="select"><input name="checkbox" id="chk1" class="chktbl" type="checkbox"></div>
<div class="name">Mary</div><div class="emayl">[e-mail]</div>
</div>
<div class="rowDeep">
<div class="select"><input name="checkbox" id="chk2" class="chktbl" type="checkbox"></div>
<div class="name">Jerry</div><div class="emayl">[e-mail]</div>
</div>

我需要遍历每个复选框，如果选中该框，则捕获将发送到将填充电子邮件表的网络服务的姓名和电子邮件地址。我试过这样的东西，但需要帮助......

var vals = [];
$('.select input[type="checkbox"]:checked').each(function(i) 
var name = $(this).next('.name');
vals.push(($(name).html());
var emayl = $(this).next('.emayl');
vals.push(($(emayl).html()); );

谢谢， 杰瑞

【问题讨论】：

是 .rowLight & .rowDeep 一个交替的 DIV 符号行吗？

您究竟需要什么帮助？

【参考方案1】：

这样的事情可能会起作用：

var data = $(".select input:checkbox:checked").map(function() 
    var $parent = $(this).closest(".select");
    return 
        name: $parent.next(".name").text(),
        email: $parent.siblings(".emayl").text()
    ;
).get();

请注意，数据将如下所示：

[  name: '<name>', email: '<email>' , ... ]

示例： http://jsfiddle.net/andrewwhitaker/rMPDH/

---

如果你真的想要一个数组中的数据：

["<name1>", "<email1>", "<name2>", "<email2>"]

你可以试试：

var data = $(".select input:checkbox:checked").map(function() 
    var $parent = $(this).closest(".select");

    return [ $parent.next(".name").text(), $parent.siblings(".emayl").text() ];
).get();

示例： http://jsfiddle.net/andrewwhitaker/4GdC8/

---

注意事项：

使用方便的 .map 获取 jQuery 结果并将其转换为您需要的数据。 在.map 调用结束时调用.get() 会强制将生成的对象放入适当的数组中（与jQuery 对象相反） 使用.closest()、.next() 和.siblings() 检索正确的数据。

【讨论】：

Andrew - 我想将“数据”对象发送到我的 PageMethod 进行处理。我应该在我的 PageMethod 中定义什么类型的对象？类似于：公共共享函数 wsGetEMails(ByVal data As ________) As String

我对 ASP.NET 不是很熟悉，但我会尝试使包含具有 name 和 email 属性的对象的数组工作。只是一个猜测，但可能是您定义了一个具有这些属性的对象，然后在您的方法中接受这些对象的数组。

【参考方案2】：

这是一个替代解决方案，使用 rowDeep 和 rowLight 来表示行

$('.rowLight,.rowDeep').each(function(i,e)
    var $row = $(e);

    // see if the checkbox is checked
    if ($row.find('input[type="checkbox"]').is(':checked'))
        var name = $row.find('.name').text(),
            emayl = $row.find('.emayl').text();

        alert(name + ' <' + emayl + '>');
    
);

DEMO

【参考方案3】：

检查这个小提琴，打开你的浏览器 javascript 控制台，即 Chrome 或 firefox 中的 firebug。 http://jsfiddle.net/q2jsp/12/

根据 jquery 的版本，您可以使用siblings() 或next().next()。