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

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