So rufen Sie Kontrollkästchenwerte in jQuery ab

240

Wie kann ich mit jQuery die aktivierten Kontrollkästchenwerte abrufen und sofort in einen Textbereich einfügen?

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 das id="c_d"von Ajax aktualisiert wird , funktioniert der folgende Code von altCognito nicht. Gibt es eine gute Lösung?

jquery html checkbox

— lanqy
quelle

Wolltest du alle oder einen auf einmal?

— TStamper

Wie können wir das Kontrollkästchen mit einem bestimmten Wert / Label aktivieren? sag "one_name2"?

— Amitd

5

@Amitd use $ ("input [name = one_name2]"). Attr ('geprüft', wahr);

— Mark Schultheiss

Danke, das hat gut funktioniert. Auch für den Radiotyp. 1 Stimme auf :)

— Amitd

320

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 Änderungen der ID weiter funktionieren können. Die Lösung besteht darin, die Funktion updateTextArea einer generischen Funktion zuzuordnen, die CSS-Klassen verwendet, und die Live-Funktion zu verwenden, um das DOM auf diese Änderungen zu überwachen.

— cgp
quelle

2

Ah ha! Ausgezeichnet. Sie haben beide wahrscheinlichen Szenarien berücksichtigt. Gute Arbeit, Sir. ;)

— KyleFarris

Wie können wir das Kontrollkästchen mit einem bestimmten Wert / Label aktivieren? sag "one_name2"?

— Amitd

6

Ich verwende Map gerne für solche Dinge: $ (': checked', '#c_b'). Map (Funktion (i, cb) {return cb.value}) .get (). Dies ist auch nur eine persönliche Präferenz, aber ich würde das Abrufen der Werte vom Ändern der Textbereiche trennen, etwa: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val ($ (': checked', '#c_b'). map (Funktion (i, cb) {return cb.value}) .get ())); $ ('# c_b input: first'). triggerHandler (' klicken'); });

— Brandon

Verwenden Sie $(document).on("click", "#c_b input", updateTextArea);stattdessen, um Ajax'y-Probleme zu umgehen.

— Goldentoa11

1

Sie sind sich nicht sicher, ob dies nur in IE (11) ist, aber sollte es nicht sein $('#c_b:checked')(Betonung des Abstands)?

— AceMark

124

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

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

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>

— Mohamed ElSheikh
quelle

Ich bin gerade darauf gestoßen, als ich nach einer Möglichkeit gesucht habe, alle Werte der aktivierten Kontrollkästchen eines bestimmten Namens abzurufen, und es funktioniert bei mir mit zwei kleinen Problemen. 1) Jedes Mal, wenn ich ein anderes Kontrollkästchen als das erste aktiviere, wird das Häkchen im ersten aktiviert. 2) Wenn ich versuche, dies auf ein Array festzulegen, damit ich später auf die Informationen zugreifen kann, stürzt es ab.

— Reverend Bubbles

3

Dies ist ehrlich gesagt die beste Antwort. Sehr einfach. Ich würde die "Funktion" und "Warnung" entfernen, da dies einige Leute verwirrt, aber der Code ist einfach, gut gemacht.

— Tmarois

showSelectedValues funktioniert auch zum Dekodieren von Gruppen von Optionsfeldern mit demselben Namen

— Matthew Lock

65

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 geht's ... Du hattest vorher noch keinen HTML-Code. Wie auch immer, ja, ich dachte, Sie wollten den Wert in einen Textbereich einfügen, wenn darauf geklickt wird. Wenn Sie möchten, dass die Werte der aktivierten Kontrollkästchen beim Laden der Seite in den Textbereich eingefügt werden (möglicherweise mit einer schönen Komma-Trennung), ist dies so einfach wie:

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

Bearbeiten 2 Wie die Leute es getan haben, können Sie dies auch tun, um die lange Auswahl zu verkürzen, die ich geschrieben habe:

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

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

— KyleFarris
quelle

50

Das funktioniert perfekt für mich:

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

Danke Mohamed ElSheikh

— Nic
quelle

1

cooler Mann ... dies ist der einzige, der für meine Ajax-Schleife funktioniert hat;) danke

— Sagive SEO

7

kann auch $ ('Eingabe [Name = Auswahl]: markiert'). map (function () {return this.value;}). toArray ()

— ygaradon

8

Vielen Dank an 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();
});

— Harpreet Bhatia
quelle

6

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

Verwendung:

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.

— Andy
quelle

es funktioniert wirklich gut, vielen Dank ... Ich habe gerade die "return jQuery (this) .val ();" zu "return true"; Da es in meinem Fall ein Kontrollkästchen ist, muss ich nur wissen, ob es aktiviert ist oder nicht. Danke!

— TCB13

5

Hier ist eine Alternative für den Fall, dass 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 ich handlicher finde als der Text im Textbereich).

— pgcd
quelle

3

   $(document).ready(function() {
        $(':checkbox').click(function(){
           var cObj = $(this);
           var cVal = cObj.val();
           var tObj = $('#t');
           var tVal = tObj.val();
           if( cObj.attr("checked")) {
              tVal = tVal + "," + cVal; 
              $('#t').attr("value", tVal);
           } else {
              //TODO remove unchecked value.
           }
        });
    });

1

Sie haben es viel zu kompliziert. Außerdem legen Sie den Wert eines Textbereichs im Allgemeinen nicht mit dem Parameter value fest. Der Wert eines Textfelds ist innerHTML. Wenn Sie den Wert eines Elements festlegen, ist es normalerweise am besten, die Methode 'val ()' für Browserabstraktionszwecke zu verwenden.

— KyleFarris

3

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

— Satoru
quelle

2

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

— mkoryak
quelle

1

Es können mehrere Kontrollkästchen gleichzeitig aktiviert sein.

— KyleFarris

2

Wie auch immer, Sie brauchen 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 in den Textbereich mit eingefügt id='textarea' .

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

— Pim Jäger
quelle

2

Dies ist falsch, isgibt einen booleschen Wert zurück, ein boolescher Wert hat keine valMethode.

— undefiniert

2

Ein viel einfacherer und kürzerer Weg, den ich benutze, um dasselbe zu erreichen, indem ich die Antwort aus einem anderen Beitrag verwende, ist wie folgt:

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

Ursprünglich wurden die Städte aus einer MySQL-Datenbank abgerufen und in PHP während der Schleife wiederholt:

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 jetzt 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, ohne dass PHP- oder jQuery-Probleme auftreten müssen.

— Zeeshan
quelle

0

Ich hatte ein ähnliches Problem und habe es anhand der obigen Beispiele gelöst:

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

— Sam
quelle

0

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

— Sonida
quelle

0

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

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

— duckyflip
quelle

Berücksichtigt nicht mehrere Werte und das Deaktivieren von Kontrollkästchen

— Rob