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

【问题标题】：Get all checked checkboxes, possibly with same value获取所有选中的复选框，可能具有相同的值
【发布时间】：2023-03-29 11:42:01
【问题描述】：

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

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

字母不是唯一的，例如，玩家可能有手“ABCDAB”，如上图所示 - 并选择“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 值的字符串？

【问题讨论】：

标签： jquery jquery-ui checkbox jquery-ui-dialog checked

【解决方案1】：

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

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

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

【讨论】：

【解决方案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

小提琴：http://jsfiddle.net/vkfoxhh1/

【讨论】：

【解决方案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/

【讨论】：

这将返回一个数组，你仍然需要一个归约操作（例如.join()）来获取一个字符串
@blgt 你是绝对正确的，这里是一个 .join("") 的小提琴：Fiddle

【解决方案4】：

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

【讨论】：

【解决方案5】：

这也适用于您的小提琴。

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

【讨论】：