Jak pobrać wartości pól wyboru w jQuery

240

Jak użyć jQuery, aby uzyskać zaznaczone wartości pól wyboru i natychmiast umieścić je w polu tekstowym?

Podobnie jak ten kod:

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

Jeśli Ajaxid="c_d" zaktualizuje , poniższy kod altCognito nie działa. Czy jest jakieś dobre rozwiązanie?

jquery html checkbox lanqy
źródło

chciałeś wszystkich naraz?

TStamper

Jak możemy „zaznaczyć” pole z podaną wartością / etykietą? powiedz „one_name2”?

Amitd

5

@Amitd use $ ("input [name = one_name2]"). Attr ('zaznaczone', prawda);

Mark Schultheiss,

dzięki, że działało ładnie .. nawet dla typu radia. 1 głos w górę :)

Amitd

320

Oto jeden, który działa ( patrz przykład ):

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

Aktualizacja

Kilka miesięcy później zadano kolejne pytanie, w jaki sposób utrzymać powyższe działanie w przypadku zmiany ID. Cóż, rozwiązanie sprowadza się do mapowania funkcji updateTextArea na coś generycznego, który wykorzystuje klasy CSS, i do użycia funkcji live do monitorowania DOM pod kątem tych zmian.

cgp
źródło

2

Ach ha! Doskonały. Wziąłeś pod uwagę oba prawdopodobne scenariusze. Dobra robota, proszę pana. ;)

KyleFarris

Jak możemy „zaznaczyć” pole z podaną wartością / etykietą? powiedz „one_name2”?

Amitd

6

Lubię używać map do takich rzeczy: $ (': zaznaczone', '#c_b'). Map (funkcja (i, cb) {return cb.value}) .get (). Jest to również osobista preferencja, ale oddzielam uzyskiwanie wartości od zmiany obszarów tekstowych, na przykład: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val ($ (': zaznaczone', '#c_b'). map (funkcja (i, cb) {return cb.value}) .get ())); $ ('# c_b input: first'). triggerHandler (' Kliknij'); });

Brandon

użyj $(document).on("click", "#c_b input", updateTextArea);zamiast tego, aby obejść problemy ajax.

Goldentoa11

1

nie jestem pewien, czy jest to tylko w IE (11), ale czy nie powinno $('#c_b:checked')(nacisk na odstępy)?

AceMark,

124

Możesz także zwrócić wszystkie wybrane wartości pól wyboru w ciągu oddzielonym przecinkami. Ułatwi to również wysyłanie go jako parametru do SQL

Oto przykład, który zwraca wszystkie wybrane wartości pól wyboru, które mają nazwę „chkboxName” w osobnym ciągu przecinkowym

A oto javascript

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

Oto próbka HTML

<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
źródło

Właśnie natknąłem się na to, szukając sposobu na uzyskanie wszystkich wartości zaznaczonych pól wyboru dla danej nazwy i działa to dla mnie z dwoma małymi problemami. 1) za każdym razem, gdy zaznaczam pole inne niż pierwsze, przełącza znacznik wyboru w pierwszym. 2) Gdy próbuję ustawić to na tablicę, aby móc później uzyskać dostęp do informacji, następuje awaria.

Wielebny Bubbles,

3

To jest naprawdę najlepsza odpowiedź. Bardzo prosty. Usunąłem „funkcję” i „alert”, ponieważ dezorientuje to niektórych ludzi, ale kod jest prosty, dobrze wykonany.

tmarois

showSelectedValues działa również w przypadku dekodowania grup przycisków radiowych o tej samej nazwie

Matthew Lock

65

Twoje pytanie jest dość niejasne, ale myślę, że potrzebujesz tego:

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

Edycja: Och, dobra .. proszę bardzo ... Nie miałeś wcześniej kodu HTML. W każdym razie tak, myślałem, że chcesz umieścić wartość w polu tekstowym, kiedy zostanie kliknięty. Jeśli chcesz, aby wartości zaznaczonych pól wyboru były umieszczane w obszarze tekstowym (być może z ładnym rozdzielaniem przecinków) podczas ładowania strony, byłoby to tak proste, jak:

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

Edycja 2 Jak zrobili ludzie, możesz to zrobić, aby skrócić długi selektor, który napisałem:

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

... całkowicie zapomniałem o tym skrócie. ;)

KyleFarris
źródło

50

Działa to dla mnie idealnie:

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

Dzięki Mohamed ElSheikh

Nic
źródło

1

fajny człowiek ... to jedyny, który pracował dla mojej pętli ajax;) dzięki

Sagive SEO

7

can also $ ('input [name = selection]: selected'). map (function () {return this.value;}). toArray ()

ygaradon

8

Dzięki altCognito Twoje rozwiązanie pomogło. Możemy to również zrobić, używając nazwy pól wyboru:

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
źródło

6

Poniższe informacje mogą być przydatne, ponieważ szukałem tu nieco innego rozwiązania. Mój skrypt musiał automatycznie zapętlać elementy wejściowe i musiał zwrócić ich wartości (dla funkcji jQuery.post ()), problem polegał na tym, że pola wyboru zwracały swoje wartości bez względu na sprawdzony status. To było moje rozwiązanie:

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

Stosowanie:

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

Jeśli dane pole wejściowe jest polem wyboru, funkcja input_val zwraca wartość tylko wtedy, gdy jest zaznaczona. Dla wszystkich innych elementów wartość jest zwracana niezależnie od statusu zaznaczonego.

Andy
źródło

to naprawdę działa dobrze, wielkie dzięki ... Właśnie zmieniłem „return jQuery (this) .val ();” „zwrócić true;” bo w moim przypadku jest to pole wyboru. Muszę tylko wiedzieć, czy jest zaznaczone, czy nie ... dzięki!

TCB13,

5

Oto alternatywa na wypadek, gdybyś musiał zapisać wartość do zmiennej:

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

(map () zwraca tablicę, którą uważam za wygodniejszą niż tekst w textarea).

pgcd
źródło

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

źródło

1

Zbyt skomplikowałeś to. Poza tym na ogół nie ustawiasz wartości pola tekstowego za pomocą parametru value - wartość pola tekstowego to innerHTML. A jeśli chcesz ustawić wartość jakiegoś elementu, zwykle najlepiej jest użyć metody „val ()” do celów abstrakcyjnych w przeglądarce.

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
źródło

2

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

mkoryak
źródło

1

Jednocześnie można zaznaczyć wiele pól wyboru.

KyleFarris

2

W każdym razie prawdopodobnie potrzebujesz czegoś takiego:

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

Spowoduje to pobranie wartości pierwszego zaznaczonego pola wyboru na stronie i wstawienie go w polu tekstowym za pomocą id='textarea'.

Zauważ, że w przykładowym kodzie powinieneś umieścić pola wyboru w formularzu.

Pim Jager
źródło

2

To źle, iszwraca wartość logiczną, wartość logiczna nie ma valmetody.

niezdefiniowany

2

Znacznie łatwiejsza i krótsza droga, której używam do osiągnięcia tego samego, przy użyciu odpowiedzi z innego postu, wygląda następująco:

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

Pierwotnie miasta są pobierane z bazy danych MySQL i zapętlone w PHP podczas pętli:

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 } ?>

Teraz, używając powyższego kodu jQuery, otrzymuję wszystkie wartości city_id i przesyłam z powrotem do bazy danych za pomocą $ .get (...)

Ułatwiło mi to życie, ponieważ kod jest teraz w pełni dynamiczny. Aby dodać więcej miast, wystarczy dodać więcej miast do mojej bazy danych i nie martw się o PHP lub jQuery.

zeeshan
źródło

0

Miałem podobny problem i tak rozwiązałem go, korzystając z powyższych przykładów:

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

sam
źródło

0

Spróbuj tego..

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
źródło

0

Jeśli chcesz natychmiast wstawić wartość dowolnego pola wyboru podczas sprawdzania, powinno to działać dla Ciebie:

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

duckyflip
źródło

Nie uwzględnia wielu wartości i odznaczania pól wyboru

Rob

Jak pobrać wartości pól wyboru w jQuery

Odpowiedzi:

Aktualizacja