jQuery在选中复选框时检索数据

snvhrwxg 于 2023-06-22 发布在 jQuery

关注(0)|答案(3)|浏览(151)

我没有使用表格，而是使用下面的HTML，在col1中显示复选框，在col2中显示名称，在col3中显示EMail地址。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">Mary@ABC.com</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">Jerry@ABC.net</div>
</div>

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

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()); });

谢谢
杰瑞

jquery

来源：https://stackoverflow.com/questions/6829759/jquery-to-retreve-data-when-checkbox-is-checked

3条答案

按热度按时间

baubqpgj1#

这样的东西可能会起作用：

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()检索正确的数据。

赞(0）回复(0）举报 2023-06-22

jjhzyzn02#

下面是另一种解决方案，使用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

赞(0）回复(0）举报 2023-06-22

3phpmpom3#

检查这个小提琴，打开您的浏览器JavaScript控制台，即Chrome或Firefox中的firebug。http://jsfiddle.net/q2jsp/12/
根据jquery的版本，你可以使用siblings（）或next（）.next（）。

赞(0）回复(0）举报 2023-06-22