jquery checkbox get value text input

Question

I have list input checkbox

<input type="checkbox" name="id_image" value="homies_01" class="id_image" />
<input type="checkbox" name="id_image" value="homies_02" class="id_image" />
<input type="checkbox" name="id_image" value="homies_03" class="id_image" />

<input type="text" name="id_image" value="" class="id_image_check" />

How to check multiple input checkbox i have show value to input type="text"as

<form>
<input type="text" name="id_image" value="homies_01, homies_02, homies_03" class="id_image_check" />
</form>

It's answered here: https://stackoverflow.com/questions/2834350/get-checkbox-value-in-jquery — Kamotho, Sep 16 '17 at 10:58

score 1 · Answer 1 · answered Sep 16 '17 at 10:58

1

With jquery

$(".id_image").on("click",function(){
  $(".id_image_check").val(
    $(".id_image :checked").map((i,el) => el.value).join(", ")
  )
});

answered Sep 16 '17 at 10:58

Jonas Wilms

132,000
20
149
151

https://jsfiddle.net/gerhcm9c/. @Jons i have checkbox but don't value on input? any for help me? – DinhS Sep 16 '17 at 11:20

score 1 · Accepted Answer · answered Sep 16 '17 at 11:17

There is a perfecly solution with Vanilla Javascript

function attachListeners() {
  var checkboxes = document.getElementsByClassName('id_image')

  for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].addEventListener('click', getAndPutValues, false);
  }
}

function getAndPutValues() {
  var result = [];
  document.querySelectorAll(".id_image:checked").forEach(function(item) { result.push(item.value);});

  document.querySelector('.id_image_check').value = result.join(', ');
}

attachListeners();

Great support! Thanks @Henrique – DinhS Sep 16 '17 at 11:25 — DinhS, Sep 16 '17 at 11:25

hanish singla · Answer 3 · 2017-09-16T11:11:31.893

First of all you should use array notation for checkbox names

<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" />
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" />
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" />

It will help you to post multiple values simultaneously

After that for checking values in jQuery you can use

<script type="text/javascript">
   $('[name="id_image[]"]').click(function(){
        var value = '';
        $('[name="id_image[]"]:checked').each(function(){
           value += $(this).val();
        });

       $('#id_image_check').val(value);
   });
</script>

https://jsfiddle.net/7sndfram/1/ @hanish i have checkbox but don't value on input? any for help me? — DinhS, Sep 16 '17 at 11:22

score 0 · Answer 4 · answered Sep 16 '17 at 11:24

Try this :

<input type="checkbox" name="id_image" value="homies_01" class="id_image" onchange="toggleCheckbox(this)" />
<input type="checkbox" name="id_image" value="homies_02" class="id_image" onchange="toggleCheckbox(this)" />
<input type="checkbox" name="id_image" value="homies_03" class="id_image" onchange="toggleCheckbox(this)" />

<input type="text" name="id_image" id="id_image" value="" class="id_image_check" />

<script type="text/javascript">
    var arrImages = [];
    function toggleCheckbox(element) {
        console.log('element', element.value);

        arrImages.push(element.value);
        document.getElementById("id_image").value = arrImages;
    }
</script>

Deepansh Sachdeva · Answer 5 · 2017-09-16T11:25:43.550

Just use square brackets [] at end of name if you want to submit it using form or use the following method in jQuery to get values of multiple selected checkboxes.

$('#show').click(function(){
  values = "";
  $('input.id_image:checked').each(function(){
    values += $(this).val() + " ";
  });
  if(values){
    $('#values').html(values);
  }else{
    $('#values').html("None");
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" /> Homies 1
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" /> Homies 2
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" /> Homies 3

<br>
<button id="show">Show</button>

<br>
<div id="values"></div>

How to get value up to input text none show by button. Any for help me? — DinhS, Sep 16 '17 at 11:23
@DinhTv edited my code... were are you asking for something like this ? check — Deepansh Sachdeva, Sep 16 '17 at 11:26

jquery checkbox get value text input

5 Answers5