如何在按鈕單擊時獲取所選復選框值？

Question

如何在單擊按鈕的列表視圖中獲取所選復選框值？

我正在使用jQuery append動態構建列表項。

這是創建列表項的jQuery代碼... obj_address_list是一個對象數組，每個對象都有name，alias，id和mobile。 復選框的值將類似於“名稱”

$.each(obj_address_list, function(ctr, obj) {
  $('#ul_address_list').append('<li data-icon="false">' +
    '<a href="#" class="add-container">' +
      '<label class="add-container" data-corners="false">' +
        '<input name="chk_address" id="chk_address" type="checkbox" value="'+obj.name+'<'+obj.alias+'-'+obj.id+'>'+'" />' +
        '<label class="lbl_add-container">' +
          '<h3>'+obj.name+'</h3>' +
          '<p>'+obj.mobile+'</p></div>' +
        '</label>' +
      '</label>' +
    '</a>' +
  '</li>');
});
$("input[name=chk_address]").checkboxradio();
$('#ul_address_list').listview('refresh');

追加后在屏幕下方找到。

單擊“發送”按鈕時，我需要捕獲所有選定的復選框值並將其傳遞給另一個頁面。

以下是我在點擊發送按鈕時嘗試使用的代碼。 按鈕的id是'a_send-sms'，復選框的id是'chk_address'。 但這似乎並沒有奏效。

$("#a_send-sms").on("tap",function(e){
  e.preventDefault();
  var selected = new Array();
  $('#chk_address input:checked').each(function() {
    alert('inside');
    selected.push($(this).attr('value'));
  });
  console.log(selected);
});

我錯過了什么？

Answer 1

您不能擁有多個ID，ID 必須是唯一的。 給這些復選框一個類，然后迭代它們：

$('input.chk_address:checked')
        ^

所以嘗試：

$("#a_send-sms").on("tap",function(e){
  e.preventDefault();
  var selected = new Array();
  $('input.chk_address:checked').each(function() {
    alert('inside');
    selected.push(this.value);
  });
  console.log(selected);
});

Answer 2

正如@Sergio所說，你不應該為幾個元素使用相同的id 。 此外，您的選擇器$('#chk_address input:checked')是錯誤的。 jQuery會將chk_address視為父級並查找子元素檢查input 。

$("#a_send-sms").on("tap",function(e){
  e.preventDefault();
  var selected = new Array();
  $('ul input:checked').each(function() { // or listview id
    alert('inside');
    selected.push($(this).val()); // instead of .attr("value")
  });
  console.log(selected);
});