4

Bom gostaria de estar cadastrando os dias da semana selecionados diretamente no insert, porem gostaria de estar passando esses valores como uma "frase" para o campo escondido. Qual a maneira de estar fazendo isso no jquery? EX: eu marquei no checkbox de Terça e Sexta dai no input hidden seria enviado = Terça, Sexta

<input type="checkbox" name="dias[]" value="Segunda">Segunda &nbsp;
<input type="checkbox" name="dias[]" value="Terca">Terça &nbsp;
<input type="checkbox" name="dias[]" value="Quarta">Quarta &nbsp;
<input type="checkbox" name="dias[]" value="Quinta">Quinta &nbsp;
<input type="checkbox" name="dias[]" value="Sexta">Sexta &nbsp;
<input type="checkbox" name="dias[]" value="Sabado">Sabado &nbsp;
<input type="checkbox" name="dias[]" value="Domingo">Domingo &nbsp;

<input type="hidden" name="dias" value="">

3 Respostas 3

5

Podes fazer um loop a cada vez que um deles é mudado. No fim do loop juntas o valor numa string e pões no input.

Algo assim:

var inputs = $('input[name="dias[]"]');
inputs.on('change', function () {
    var str = [];
    inputs.each(function () {
        if (this.checked) str.push(this.value);
    });
    $('input[name="dias"]').val(str.join(','));
});

jsFiddle: https://jsfiddle.net/67e1x5af/

4
  • 2
    realmente rapaz ficou muito pratico eu tenho esse codigo funcionando em php, porem creio que esse metodo vai aliviar mais o php pois usando foreach pra cada check é 1 update a mais. uma sugestao no jsfiddle coloca o campo hidden como text para o pessoal ver como funciona :) Commented 7/04/2015 às 18:37
  • Sergio, quando se precisa percorrer um array para montar um segundo, é preferível usar o método map. Commented 7/04/2015 às 18:44
  • 2
    @TobyMosque há quem diga que o map do jQuery até usa mais memória que o each. Se fosse .map() nativo contra .each() do jQuery concordava contigo também. Semanticamente faz mais sentido o each(), e talvez a opção 2 fosse .filter().
    – Sergio
    Commented 7/04/2015 às 18:50
  • @Sergio, tentei fazer um Benchmark, fiquei surpreso com o resultado do jQuery. Commented 7/04/2015 às 19:22
3

uma alternativa com javaScript puro é a seguinte:

var ckbDias = document.querySelectorAll("input[name='dias[]']");
var txtDias = document.querySelector("input[name='dias']");

var ckbDiasOnClick = function () {
    var selecionados = document.querySelectorAll("input[name='dias[]']:checked");
    var valores = [].map.call(selecionados, function(selecionado, indice) {
        return selecionado.value;
    });

    txtDias.value = valores.join(", ");
}

for (var indice in  ckbDias) {
    ckbDias[indice].onclick = ckbDiasOnClick;
}
<input type="checkbox" name="dias[]" value="Segunda" />Segunda <br />
<input type="checkbox" name="dias[]" value="Terca" />Terça <br />
<input type="checkbox" name="dias[]" value="Quarta" />Quarta <br />
<input type="checkbox" name="dias[]" value="Quinta" />Quinta <br />
<input type="checkbox" name="dias[]" value="Sexta" />Sexta <br />
<input type="checkbox" name="dias[]" value="Sabado" />Sabado <br />
<input type="checkbox" name="dias[]" value="Domingo" />Domingo <br />
    
<input type="text" name="dias" />

Aos interessados, fiz um jsPerf com jQuery each vs jQuery map vs Vanilla map

jsPerf

1
  • 1
    +1 - por a resposta ser em JavaScript Nativo.
    – Sergio
    Commented 8/04/2015 às 6:04
2

Uma maneira e percorrer os checkbox selecionados ao mudar algum deles, exemplo:

$('.dias').on('change',function(){
    var dias = [];
    $('.dias:checked').each(function(){
        dias.push($(this).val());
    });
    $("#oculto").val(dias.join(","));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="dias" name="dias[]" value="Segunda">Segunda &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="Terca">Terça &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="Quarta">Quarta &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="Quinta">Quinta &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="Sexta">Sexta &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="Sabado">Sabado &nbsp;
<input type="checkbox" class="dias" name="dias[]" value="Domingo">Domingo &nbsp;

<input type="text" name="dias" id="oculto" value="">

3
  • 1
    Bem parecida com a minha :P
    – Sergio
    Commented 7/04/2015 às 18:35
  • @Sergio Estava pronta já, não quis deixar de postar, e a minha não tem if...kkk :P
    – abfurlan
    Commented 7/04/2015 às 18:36
  • 2
    Sim eu percebi que já devia estar quase pronta. $('.dias:checked') faz também um loop com uma lógica if lá dentro, só que não se vê :)
    – Sergio
    Commented 7/04/2015 às 18:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .