Write checkbox value to input

Question

Write checkbox value to input

Asked 9 years, 5 months ago

Viewed 498 times

4

Well I would like to be registering the days of the week selected directly in Sert, however I would like to be passing these values as a "phrase" to the hidden field. What is the way to be doing this in jquery? EX: I checked the Tuesday and Friday checkbox then the Hidden input 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="">

3 answers

5

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

Something like that:

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/

2

really boy got very practical I have this code working in php, however I believe this method will relieve more php because using foreach for each check is 1 update more. a suggestion in jsfiddle puts the Hidden field as text for staff to see how it works :)

– Arsom Nolasco

2015/04/07 at 18:37
Sergio, when you need to traverse an array to mount a second, it is preferable to use the map method.

– Tobias Mesquita

2015/04/07 at 18:44
2

@Tobymosque there are those who say that jQuery’s map even uses more memory than each. If it were .map() native against .each() jQuery agreed with you as well. Semantically it makes more sense to each(), and maybe option 2 was .filter().

– Sergio

2015/04/07 at 18:50
@Sergio, I tried to make a Benchmark, I was surprised by the result of jQuery.

– Tobias Mesquita

2015/04/07 at 19:22

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Tobias Mesquita • **22,900** points · Answer 1 · 2015-04-07T18:42:17+00:00

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 did a jsPerf with jQuery each vs jQuery map vs Vanilla map

jsPerf

by abfurlan • **10,570** points · Answer 2 · 2015-04-07T18:34:57+00:00

A way and go through the checkbox selected when changing any of them, example:

$('.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="">