Write checkbox value in input

Navigation
4

I'd like to be registering the selected days of the week directly in the insert, but I'd like to be passing those values as a "phrase" to the hidden field. What's the way to do this in jquery? EX: I checked the Tuesday and Friday checkbox so the input hidden would be sent = Tuesday, Friday 

<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="">
    
asked by anonymous 07.04.2015 / 20:26

3 answers

5

You can loop every time one of them is changed. At the end of the loop, put the value in a string and put it in the input.

Something like this: 

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

    
07.04.2015 / 20:31
3

An alternative with pure javaScript is as follows: 

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

To those interested, I made a jsPerf with jQuery each vs jQuery map vs Vanilla map

jsPerf

    
07.04.2015 / 20:42
2

One way and scroll through the selected checkbox by changing one of them, eg: 

$('.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><inputtype="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="">
    
07.04.2015 / 20:34
How to run an event once? How to format title for url format?