Question

我为我的问题准备了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值的字符串？

Answer 1

你想要的东西：

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

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

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

Answer 2

循环检查元素 - 从中创建字符串并添加到alertbox中，添加此脚本：

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

<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="unicode">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

    
    </head>
    <body>
        <div class="container">
             <div class="col-md-8 col-md-offset-2">
                  <div class="row">
                       <div class="col-sm-12">
                            <h3><a href="some_link.html">Link</a></h3>
                       </div>
                  </div>
             </div>
        </div>
    </body>

Answer 3

您可以使用.reduce：

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

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

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

Answer 4

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

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

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

5 个答案: