如何在按钮单击时获取所选复选框值？

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