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/

相关标签:

Answer 1

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

Answer 2

Problem

1. if($(':checkbox:checked')) will always be true
2. 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

Answer 3

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

Answer 4

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
});