获取所有选中的复选框，可能具有相同的值

Question

我已经为我的问题准备了jsFiddle：

在文字游戏中，我想显示一个对话框，其中包含玩家手中的所有字母牌 - 并允许她select一些与牌堆交换。

字母不是唯一的，例如玩家可能有手牌 "ABCDAB"，如上面的截图 - 和 select "ABA" 用于交换。

这是我的代码 -

HTML（带对话框和按钮）：

<div id="swapDlg" title="Swap letters">
  <p>Select letters for swapping:</p>
  <div id="swapList">
  </div>
</div>

<button id="swapBtn">Swap letters</button>

JavaScript:

$(function() {
  $('#swapDlg').dialog({
    modal: true,
    minWidth: 400,
    autoOpen: false,
    buttons: {
      'Swap': function() {
        $(this).dialog('close');
        var result = 'How to get all selected letters?' // HERE
        alert('You would like to swap: ' + result);
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  });

  $('#swapBtn').button().click(function(e) {
    e.preventDefault();
    $('#swapDlg').dialog('open');
  });

  var str = 'AB*CD*AB';
  var checkBoxes = [];
  for (var i = 0; i < str.length; i++) {
    var letter = str[i];
    if (letter != '*') {
      checkBoxes.push('<label><input type="checkbox" value="' +
        letter + '">&nbsp;' + letter + '</label>');
    }
  }

  $('#swapList')
    .empty()
    .append(checkBoxes.join('<br>'));
});

请帮助我解决 // HERE 评论标记的行。

如何获得包含所有 checked 个值的字符串形式的结果？

Answer 1

遍历选中的元素 - 从中创建字符串并添加到警告框中，添加此脚本：

演示：http://jsfiddle.net/9cdjjsL5/

    var a = [];
    $("input:checked").each(function() {
        a.push($(this).val());
    });
    var str = a.join(', ');

Answer 2

您可以使用 .reduce:

var result = $("#swapList :checked").toArray().reduce(function(acc, elt) {
     return acc + $(elt).val();
}, "");

参考。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

Fiddle: http://jsfiddle.net/vkfoxhh1/

Answer 3

你想要这样的东西：

        var list = $(":checked").map(function(){return $(this).attr("value");}).get();

请注意使用了来自 jQuery - get a list of values of an attribute from elements of a class 的最佳答案来帮助我回答问题。

Fiddle（更新为使用连接将数组转换为字符串）：http://jsfiddle.net/6nddum4q/5/

Answer 4

        var result = [];
        $('#swapList input:checkbox:checked').each(function() {
                        result.push($(this).val());
                    });
        alert('You would like to swap: ' + result.join(""));

Answer 5

这也适用于您的 fiddle 检查。

result = '';
$(function() {
  $('#swapDlg').dialog({
    modal: true,
    minWidth: 400,
    autoOpen: false,
    buttons: {
      'Swap': function() {
        $(this).dialog('close');
        $('#swapList input:checked').each(function() {
          result += this.value;
          result += " ";
        });
        alert('You would like to swap: ' + result);
      },
      'Cancel': function() {
        $(this).dialog('close');
      }
    }
  });

获取所有选中的复选框，可能具有相同的值

Get all checked checkboxes, possibly with same value

jquery

jquery-ui

checkbox

jquery-ui-dialog

checked