jQuery刪除複選框時的數據

而不是使用表格，我有以下HTML顯示在col 1中的複選框，在col 2中的名稱和在col 3中的電子郵件地址。HTML看起來像這樣：
jQuery刪除複選框時的數據

<div class="rowLight"> 
<div class="select"><input name="checkbox" id="chk1" class="chktbl" type="checkbox"></div> 
<div class="name">Mary</div><div class="emayl">[email protected]</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">[email protected]</div> 
</div>

我需要通過每個複選框迭代，並選中該複選框，捕獲將被髮送到一個Web服務，這將填充電子郵件表名稱&電子郵件地址。我想這樣的事情，但是需要幫助...

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

感謝名單，
傑裏

來源

2011-07-26 Jerry

是'.rowLight'＆'.rowDeep'交替的DIV符號行嗎？ –

你需要什麼幫助？ – Litek

嘗試使用val（） – chchrist

像這樣的東西可以工作：

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()檢索正確的數據。

來源

2011-07-26 12:13:20

Andrew - 我想將'data'對象發送到我的PageMethod進行處理。我應該在我的PageMethod中定義什麼類型的對象？就像：公共共享函數wsGetEMails（BYVAL數據爲________）作爲字符串 – Jerry

我不熟悉ASP.NET，但我會嘗試使包含具有'name'和'email'屬性的對象的數組工作。只是猜測，但它可能是你用這些屬性定義一個對象，然後在你的方法中接受這些對象的數組。 –

下面是一個alternatvie解決方案，使用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

來源

2011-07-26 12:17:00

布拉德 - 比你的答案... – Jerry

入住這搗鼓出來，打開你的Firefox瀏覽器的JavaScript控制檯即無論是Chrome或螢火蟲。 http://jsfiddle.net/q2jsp/12/

根據jQuery的版本，您可以使用siblings（）或next（）。next（）。

來源

2011-07-26 12:21:46 Ajaxe