jQuery: Add values of checkboxes to input text field

Question

I'm trying to add the values of any checked checkbox to an input text field. Here's my fiddle: http://jsfiddle.net/Lf6ky/

$(document).ready(function() {
  $(":checkbox").on('click', function() {
    if ($(':checkbox:checked')) {
      var fields = $(":checkbox").val();
      jQuery.each(fields, function(i, field) {
        $('#field_results').val($('#field_results').val() + field.value + " ");
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" /><br>

<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3

In this example, I have 3 checkboxes, with the values 1,2,3. If I click on all these checkboxes, then the input field should look like this: 1 2 3

If I uncheck any of these checkboxes, then that corresponding value should disappear in the input field.

How do I do this?

Alexander · Accepted Answer · 2018-11-17 07:51:37Z

I've stored the collection of check-boxes in a variable $checks, then attach the handler to this collection. Inside the event handler, I take the collection once again and filter (return) only the check-boxes that are checked.

map() returns a jQuery object containing the values of the checked check-boxes, get() converts it to a standard array. Join those values with a space and put 'em in the input.

$(document).ready(function(){
    $checks = $(":checkbox");
    $checks.on('change', function() {
        var string = $checks.filter(":checked").map(function(i,v){
            return this.value;
        }).get().join(" ");
        $('#field_results').val(string);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="field_results"/><br>

<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3

@George This is awesome, BUT what if the checkbox has already been checked ?
@Jonjie I've amended my answer. We can trigger the 'change' event on the checkboxes when the DOM is ready, which will invoke our functionality.

Alexander · Accepted Answer · 2018-11-17 07:58:14Z

On click of a checkbox, loop through the checked inputs, append to a string then assign that to your text box:

$(document).ready(function() {
  $("input:checkbox").click(function() {
    var output = "";
    $("input:checked").each(function() {
      output += $(this).val() + " ";
    });
    $("#field_results").val(output.trim());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" /><br>

<input type="checkbox" value="1">1<br>
<input type="checkbox" value="2">2<br>
<input type="checkbox" value="3">3

epascarello · Accepted Answer · 2014-04-08 18:24:54Z

First issue is

if($(':checkbox:checked')) {

will always be true since it returns a jQuery object and an object is a truthy value. If you were to use the if, you want to check the length. aka if($(':checkbox:checked').length) {

Secondly

var fields = $(":checkbox").val();

returns only the first element's value and it returns any checkbox, not just the checked ones. You want to loop through $(':checkbox:checked')

One way to attack it is to use an each and an array.

$(":checkbox").on('change', function() {
    var total = [];
    $(':checkbox:checked').each( function(){  //find the checked checkboxes and loop through them
        total.push(this.value); //add the values to the array
    });        
    $('#field_results').val(total.join(" "));  //join the array
});

Alexander · Accepted Answer · 2018-11-17 08:00:00Z

Problem

if($(':checkbox:checked')) will always be true
var fields = $(":checkbox").val(); Will give first checkbox value

You can try this.

$(document).ready(function() {
  $(":checkbox").on('click', function() {
    var fields = '';
    $(":checkbox").each(function() {
      if (this.checked) {
        fields += $(this).val() + ' ';
      }
    });
    $('#field_results').val($.trim(fields))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="text" id="field_results" />
<br>
<input type="checkbox" value="1">1
<br>
<input type="checkbox" value="2">2
<br>
<input type="checkbox" value="3">3

only issue is the end will have an exra space on it. Simple trim could fix that.

Collectives™ on Stack Overflow

jQuery: Add values of checkboxes to input text field

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Linked

Related