it-swarm.com.de

Abrufen von Kontrollkästchenwerten in jQuery

Wie verwende ich jQuery , um die markierten Kontrollkästchenwerte abzurufen und sofort in ein Textfeld zu verschieben?

Genau wie dieser Code:

<html>
  <head>
  </head>

  <body>
    <div id="c_b">
      <input type="checkbox" value="one_name" checked>
      <input type="checkbox" value="one_name1">
      <input type="checkbox" value="one_name2">
    </div>  

    <textarea id="t"></textarea>
  </body>
</html>

Wenn der id="c_d" durch Ajax aktualisiert wird, funktioniert der folgende Code von altCognito nicht. Gibt es eine gute Lösung?

236
lanqy

Hier ist eine, die funktioniert ( siehe Beispiel ):

 function updateTextArea() {         
     var allVals = [];
     $('#c_b :checked').each(function() {
       allVals.Push($(this).val());
     });
     $('#t').val(allVals);
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });

Aktualisieren

Einige Monate später wurde eine weitere Frage gestellt, wie die oben genannten Funktionen bei einer Änderung der ID beibehalten werden können. Nun, die Lösung läuft darauf hinaus, die updateTextArea-Funktion in eine allgemeine Funktion zu mappen, die CSS-Klassen verwendet, und die live-Funktion zu verwenden, um das DOM auf diese Änderungen zu überwachen.

314
cgp

Sie können auch alle ausgewählten Kontrollkästchen in einer durch Kommas getrennten Zeichenfolge zurückgeben. Dies erleichtert es Ihnen auch, wenn Sie es als Parameter an SQL senden

Hier ist ein Beispiel, das alle ausgewählten Kontrollkästchenwerte mit dem Namen "chkboxName" in einer durch Kommas getrennten Zeichenfolge zurückgibt

Und hier ist das Javascript

function showSelectedValues()
{
  alert($("input[name=chkboxName]:checked").map(
     function () {return this.value;}).get().join(","));
}

Hier ist das HTML-Beispiel

<html>
  <head>
 </head>
 <body>
  <div>
   <input name="chkboxName" type="checkbox" value="one_name" checked>
   <input name="chkboxName" type="checkbox" value="one_name1">
   <input name="chkboxName" type="checkbox" value="one_name2">
  </div>  
 </body>
 </html>
119

Ihre Frage ist ziemlich vage, aber ich denke, das ist, was Sie brauchen:

$(function() { 
    $('input[type="checkbox"]').bind('click',function() {
        if($(this).is(':checked')) {
            $('#some_textarea').html($(this).val());
         }
   });
});

Edit: Oh, okay ... los gehts ... Du hattest vorher noch kein HTML. Wie auch immer, ja, ich dachte, Sie wollten den Wert in ein Textfeld einfügen, wenn es angeklickt wird. Wenn Sie möchten, dass die Werte der aktivierten Kontrollkästchen beim Laden der Seite in das Textfeld eingefügt werden (möglicherweise mit einem netten Komma), ist dies so einfach wie:

$(function() { 
    $('#c_b input[type="checkbox"]:checked').each(function() { 
        $('#t').append(', '+$(this).val());
    });
});

Edit 2 Wie die Leute es getan haben, können Sie dies auch tun, um den langen Selektor zu verkürzen, den ich geschrieben habe:

$('#c_b :checkbox:checked').each(function() {
    $('#t').append(', '+$(this).val());
});

... Ich habe diese Abkürzung total vergessen. ;)

63
KyleFarris

Das funktioniert perfekt für mich:

alert($("input[name=chkboxName]:checked").map(function() {
    return this.value;
}).get().join(","));

Danke Mohamed ElSheikh

48
Nic

Danke altCognito, Ihre Lösung hat geholfen. Wir können dies auch tun, indem wir den Namen der Kontrollkästchen verwenden:

function updateTextArea() {         
   var allVals = [];
   $('[name=chkbox]:checked').each(function() {
      allVals.Push($(this).val());
   });
   $('#t').val(allVals)
} 
$(function() { 
    $('#c_b input').click(updateTextArea);
    updateTextArea();
});
8
Harpreet Bhatia

Das Folgende kann nützlich sein, da ich hier nach einer etwas anderen Lösung gesucht habe. Mein Skript musste die Eingabeelemente automatisch durchlaufen und ihre Werte zurückgeben (für die Funktion jQuery.post ()). Das Problem bestand darin, dass Kontrollkästchen ihre Werte unabhängig vom aktivierten Status zurückgaben. Das war meine Lösung:

jQuery.fn.input_val = function(){

    if(jQuery(this).is("input[type=checkbox]")) {
        if(jQuery(this).is(":checked")) {
            return jQuery(this).val();
        } else {
            return false;
        }
    } else {
        return jQuery(this).val();
    }
};

Verwendungszweck:

jQuery(".element").input_val();

Wenn das angegebene Eingabefeld ein Kontrollkästchen ist, gibt die Funktion input_val nur dann einen Wert zurück, wenn sie aktiviert ist. Für alle anderen Elemente wird der Wert unabhängig vom aktivierten Status zurückgegeben.

6
Andy

Hier ist eine Alternative, falls Sie den Wert in einer Variablen speichern müssen:

var _t = $('#c_b :checkbox:checked').map(function() {
    return $(this).val();
});
$('#t').append(_t.join(','));

(map () gibt ein Array zurück, das meiner Meinung nach handlicher ist als der Text in textarea).

5
pgcd
 function updateTextArea() {         
     var allVals = $('#c_b :checked').map(function() {
       return $(this).val();
     }).get();
     $('#t').val(allVals)
  }
 $(function() {
   $('#c_b input').click(updateTextArea);
   updateTextArea();
 });
3
satoru

Wie auch immer, du brauchst wahrscheinlich so etwas:

 var val = $('#c_b :checkbox').is(':checked').val();
 $('#t').val( val );

Dadurch wird der Wert des ersten aktivierten Kontrollkästchens auf der Seite abgerufen und dieses mit id='textarea' in das Textfeld eingefügt.

Beachten Sie, dass Sie in Ihrem Beispielcode die Kontrollkästchen in ein Formular einfügen sollten.

2
Pim Jager

Ein viel einfacherer und verkürzter Weg, den ich benutze, um dasselbe zu erreichen, indem ich die Antwort von einem anderen Post verwende, ist wie folgt:

var checkedCities = $('input[name=city]:checked').map(function() {
    return this.value;
}).get();

Ursprünglich werden die Städte aus einer MySQL-Datenbank abgerufen und in PHP while-Schleife weitergeleitet:

while ($data = mysql_fetch_assoc($all_cities)) {
<input class="city" name="city" id="<?php echo $data['city_name']; ?>" type="checkbox" value="<?php echo $data['city_id']; ?>" /><?php echo $data['city_name']; ?><br />
<?php } ?>

Mit dem obigen jQuery-Code erhalte ich nun alle city_id-Werte und sende sie mit $ .get (...) an die Datenbank zurück.

Dies hat mein Leben so einfach gemacht, da der Code jetzt voll dynamisch ist. Um weitere Städte hinzuzufügen, muss ich lediglich weitere Städte in meine Datenbank aufnehmen, und das ohne Bedenken bei PHP oder jQuery.

2
zeeshan
$("#t").text($("#cb").find(":checked").val())
2
mkoryak

Wenn Sie den Wert eines Kontrollkästchens sofort einfügen möchten, während es markiert ist, sollte dies für Sie funktionieren:

$(":checkbox").click(function(){
  $("#id").text(this.value)
})
0
duckyflip

Probier diese..

var listCheck = [];
console.log($("input[name='YourCheckBokName[]']"));
$("input[name='YourCheckBokName[]']:checked").each(function() {
     console.log($(this).val());
     listCheck .Push($(this).val());
});
console.log(listCheck);
0
sonida

Ich hatte ein ähnliches Problem und habe es folgendermaßen gelöst:

 $(".ms-drop").click(function () {
        $(function showSelectedValues() {
            alert($(".ms-drop input[type=checkbox]:checked").map(
               function () { return this.value; }).get().join(","));
        });
    });
0
sam