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

Question

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

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

Tak 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 id="c_d"jest aktualizowany przez Ajax, poniższy kod altCognito nie działa. Czy jest jakieś dobre rozwiązanie?

230

jquery html checkbox

Author: user86745458, 2009-04-24

Source

16 answers

Można również zwrócić wszystkie zaznaczone pola wyboru w łańcuchu rozdzielonym 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 oddzielnym przecinku

A oto javascript

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

Oto przykład 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>

115

Author: Mohamed ElSheikh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-24 20:42:42

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

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

Edit: [7] . proszę bardzo... Nie miałeś wcześniej HTML-a. W każdym razie, tak, myślałem, że chcesz umieścić wartość w obszarze tekstowym, gdy zostanie kliknięty. Jeśli chcesz, aby wartości checkboxów checkboxów były umieszczane w textarea (może z ładnym oddzieleniem przecinków) przy ładowaniu strony, byłoby to tak proste, jak:

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

Edit 2 jak ludzie to zrobili, możesz też zrobić to na skróty długi selektor napisałem:

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

... Zupełnie zapomniałem o tym skrócie. ;)

62

Author: KyleFarris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-24 15:12:12

To działa idealnie dla mnie:

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

Thanks Mohamed ElSheikh

43

Author: Nic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 15:04:20

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

8

Author: Harpreet Bhatia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-14 17:52:04

Poniższe mogą się przydać, ponieważ trafiłem tutaj szukając nieco innego rozwiązania. Mój skrypt musiał automatycznie przechodzić przez elementy wejściowe i musiał zwracać ich wartości (dla jQuery.funkcja post ()), problem polegał na tym, że checkboxy zwracały swoje wartości niezależnie od sprawdzonego statusu. 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();
    }
};

Użycie:

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

Jeśli podane pole wejściowe jest pole wyboru, funkcja input_val Zwraca wartość tylko wtedy, gdy jest zaznaczona. Dla wszystkich innych elementów, wartość jest zwracana niezależnie od stanu sprawdzonego.

6

Author: Andy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-28 05:00:41

Oto alternatywa w przypadku, gdy musisz 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 bardziej przydatną niż tekst w textarea).

5

Author: pgcd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 15:03:05

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

3

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-24 15:10:50

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

3

Author: satoru,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-04 07:03:25

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

2

Author: mkoryak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-04-24 14:51:13

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 checkboxa checkbox na stronie i wstawienie go do textarea za pomocą id='textarea'.

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

2

Author: Pim Jager,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-04 19:16:38

O wiele łatwiejszy i zwarty sposób, którego używam, aby osiągnąć to samo, używając odpowiedzi z innego postu, jest taki:

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

W przeciwieństwie do innych miast, które nie są w pełni kompatybilne z MySQL, można je pobrać z bazy danych MySQL.]}

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, pobieram wszystkie wartości city_id i przesyłam z powrotem do bazy danych używając $.get(...)

To sprawiło, że moje życie stało się tak proste, ponieważ kod jest w pełni dynamiczny. Aby dodać więcej miast, wystarczy dodać więcej miast w mojej bazie danych i bez obaw o PHP czy jQuery end.

2

Author: zeeshan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 15:03:42

<html>
<head>
<title>jQuery check / uncheck a check box example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery check / uncheck a check box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isCheck").click(function () {

    alert($('input:checkbox[name=checkme]').is(':checked'));

    });

    $("#checkIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',true);

    });

    $("#UnCheckIt").click(function () {

    $('input:checkbox[name=checkme]').attr('checked',false);

    }); 

  });
</script>
</head><body>

<input type="checkbox" name="checkme">Check Me</input>

<br/>
<br/>
<br/>

<input type='button' value='Is Check' id='isCheck'>
<input type='button' value='Check It' id='checkIt'>
<input type='button' value='UnCheck It' id='UnCheckIt'>

</body>
</html>

1

Author: sarath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-03 11:14:32

Miałem podobny problem i tak go rozwiązałem używając 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(","));
        });
    });

0

Author: sam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-05 20:00:44

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

0

Author: sonida,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-17 19:13:27

Jeśli chcesz wstawić wartość dowolnego checkboxa natychmiast, gdy jest zaznaczane, powinno to działać dla ciebie:

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

0

Author: duckyflip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 01:21:52

score 306 · Accepted Answer

Oto jeden, który działa (zobacz 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();
 });

Update

Kilka miesięcy później zadano kolejne pytanie dotyczące tego, jak utrzymać powyższe działanie w przypadku zmiany identyfikatora. Cóż, rozwiązanie sprowadza się do mapowania funkcji updateTextArea na coś generycznego, który używa klas CSS, i użycia funkcji live do monitorowania DOM dla tych zmian.