Holen Sie sich alle Kontrollkästchen aktiviert, möglicherweise mit demselben Wert

Question

ich ein jsFiddle für meine Frage vorbereitet haben:

In einem Wortspiel würde Ich mag einen Dialog mit allen Buchstaben Fliesen in der Hand des Spielers angezeigt werden - und Erlaube ihr, einige zum Tauschen mit dem Stapel auszuwählen.

Die Buchstaben sind nicht eindeutig, zum Beispiel könnte ein Spieler eine Hand "ABCDAB" wie im obigen Screenshot haben - und wählen Sie "ABA" zum Tauschen.

Hier ist mein Code -

HTML (mit Dialog und Taste):

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

Bitte helfen Sie mir mit der Linie durch die markiert // HERE kommentieren.

Wie bekomme ich das Ergebnis als String mit allen checked Werten?

Answer 1

Schleife geprüft Element durch - String von ihm erstellen und in Alertbox, Dieses Skript hinzufügen:

Demo:

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

ref: http://jsfiddle.net/9cdjjsL5/

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

Answer 2

Sie .reduce nutzen könnten. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

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

Answer 3

wollen Sie so etwas wie:

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

Bitte beachten Sie verwendet Top-Antwort: jQuery - get a list of values of an attribute from elements of a class mir zu helfen, die Frage zu beantworten.

Fiddle (aktualisiert eine Verknüpfung zu verwenden Array Zeichenfolge zu konvertieren): 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

Dies wird auch überprüft die Arbeit an Ihre Geige aus.

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