Como recuperar valores de caixas de seleção no jQuery

240

Como usar o jQuery para obter os valores marcados das caixas de seleção e colocá-lo em uma área de texto imediatamente?

Assim como este código:

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

Se o Ajaxid="c_d" for atualizado , o código abaixo do altCognito não funcionará. Existe alguma boa solução?

jquery html checkbox

— lanqy
fonte

você queria tudo ou um de cada vez?

— TSTamper

Como podemos "marcar" a caixa com um determinado valor / rótulo? diz "one_name2"?

— Amitd 26/03/10

5

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

— Mark Schultheiss 26/03

obrigado que funcionou bem..mesmo para o tipo de rádio. 1 voto

— positivo

320

Aqui está um que funciona ( veja o exemplo ):

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

Atualizar

Alguns meses depois, outra pergunta foi feita sobre como manter o funcionamento acima, se o ID mudar. Bem, a solução se resume a mapear a função updateTextArea em algo genérico que usa classes CSS e usar a função ao vivo para monitorar o DOM para essas alterações.

— cgp
fonte

2

Ah ha! Excelente. Você levou em consideração os dois cenários prováveis. Bom trabalho, senhor. ;)

— KyleFarris

Como podemos "marcar" a caixa com um determinado valor / rótulo? diz "one_name2"?

— Amitd 26/03/10

6

Eu gosto de usar o mapa para coisas como esta: $ (': selected', '#c_b'). Map (function (i, cb) {return cb.value}) .get (). Além disso, isso é apenas uma preferência pessoal, mas eu separaria a obtenção dos valores da alteração das áreas de texto, algo como: $ (function () {$ ('# c_b input'). Click ($ ('# t'). Val ($ (': verificado', '#c_b'). map (function (i, cb) {return cb.value}) .get ()); $ ('# c_b input: first'). triggerHandler (' clique em ');});

— Brandon

use $(document).on("click", "#c_b input", updateTextArea);ao invés para contornar problemas de ajax'y.

— Goldentoa11

1

não tenho certeza se isso é apenas no IE (11), mas não deveria ser $('#c_b:checked')(ênfase no espaçamento)?

— AceMark

124

Você também pode retornar o valor de todas as caixas de seleção selecionadas em uma sequência separada por vírgula. Isso também facilitará quando você o enviar como parâmetro para o SQL

Aqui está um exemplo que retorna todos os valores das caixas de seleção selecionadas que têm o nome "chkboxName" na cadeia de caracteres separada por vírgula

E aqui está o javascript

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

Aqui está o exemplo 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
fonte

Eu apenas tropecei nisso enquanto procurava uma maneira de obter todos os valores das caixas de seleção de um determinado nome e isso funciona para mim com dois pequenos problemas. 1) toda vez que eu marcar uma caixa diferente da primeira, ela alterna a marca de seleção na primeira. 2) Quando tento definir isso como uma matriz, para poder acessar as informações mais tarde, elas travam.

— Reverendo Bubbles

3

Esta é honestamente a melhor resposta. Muito simples. Gostaria de remover a "função" e o "alerta", pois isso confunde algumas pessoas, mas o código é simples, bem feito.

— precisa saber é

showSelectedValues também trabalha para a descodificação de grupos de botões de opção, também, que têm o mesmo nome

— Matthew bloqueio

65

Sua pergunta é bastante vaga, mas acho que é disso que você precisa:

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

Edit: Oh, ok .. lá vai você ... Você não tinha o HTML antes. Enfim, sim, eu pensei que você pretendia colocar o valor em uma área de texto quando ela é clicada. Se você deseja que os valores das caixas de seleção marcadas sejam colocados na área de texto (talvez com uma boa separação de vírgulas) no carregamento da página, seria tão simples quanto:

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

Editar 2 Como as pessoas fizeram, você também pode fazer isso para atalho o longo seletor que escrevi:

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

... Eu esqueci totalmente esse atalho. ;)

— KyleFarris
fonte

50

Isso funciona perfeitamente para mim:

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

Obrigado Mohamed ElSheikh

— Nic
fonte

1

Homem fresco ... este é o único que trabalhou para meu loop ajax;) graças

— Sagive SEO

7

. também pode $ ( 'input [name = seleção]: verificada') mapear (function () {return this.value;}) toArray ().

— ygaradon

8

Obrigado altCognito, sua solução ajudou. Também podemos fazer isso usando o nome das caixas de seleção:

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
fonte

6

O seguinte pode ser útil, pois cheguei aqui procurando uma solução um pouco diferente. Meu script precisava percorrer automaticamente os elementos de entrada e precisava retornar seus valores (para a função jQuery.post ()), o problema estava nas caixas de seleção retornando seus valores, independentemente do status verificado. Esta foi a minha solução:

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

Uso:

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

Se o campo de entrada fornecido for uma caixa de seleção, a função input_val retornará um valor apenas se estiver marcado. Para todos os outros elementos, o valor é retornado independentemente do status verificado.

— Andy
fonte

realmente funciona bem, muito obrigado ... Acabei de alterar o "return jQuery (this) .val ();" "retornar verdadeiro"; porque é uma caixa de seleção no meu caso, só preciso saber se está marcada ou não .. obrigado!

— TCB13 7/08/11

5

Aqui está uma alternativa, caso você precise salvar o valor em uma variável:

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

(map () retorna uma matriz, que considero mais útil que o texto na área de texto).

— pgcd
fonte

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

Você muito complicado. Além disso, você geralmente não define o valor de uma área de texto com o parâmetro value - o valor de uma caixa de texto é o innerHTML. E se você definir o valor de algum elemento, normalmente é melhor usar o método 'val ()' para fins de abstração do navegador.

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

2

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

— mkoryak
fonte

1

Várias caixas de seleção podem ser marcadas por vez.

— KyleFarris

2

De qualquer forma, você provavelmente precisará de algo assim:

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

Isso obterá o valor da primeira caixa de seleção marcada na página e a inserirá na área de texto com id='textarea'.

Observe que, no seu código de exemplo, você deve colocar as caixas de seleção em um formulário.

— Pim Jager
fonte

2

Isso está errado, isretorna um valor booleano, um valor booleano não possui valmétodo.

— indefinido

2

Uma maneira muito mais fácil e curta que eu estou usando para realizar o mesmo, usando a resposta de outro post, é assim:

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

Originalmente, as cidades são recuperadas de um banco de dados MySQL e em loop no PHP while loop:

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

Agora, usando o código jQuery acima, obtenho todos os valores city_id e os envio de volta ao banco de dados usando $ .get (...)

Isso facilitou minha vida, já que agora o código é totalmente dinâmico. Para adicionar mais cidades, tudo o que preciso fazer é adicionar mais cidades ao meu banco de dados e não se preocupe com o PHP ou o jQuery.

— zeeshan
fonte

0

Eu tive um problema semelhante e foi assim que resolvi usando os exemplos acima:

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

— sam
fonte

0

Tente este..

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
fonte

0

Se você deseja inserir o valor de qualquer caixa de seleção imediatamente enquanto está sendo marcada, isso deve funcionar para você:

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

— duckyflip
fonte

Não leva em conta vários valores e caixas de seleção desmarcando

— Rob