so this works fine

HTML

<p></p>
<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select> 
<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
</select>

<div>
    <span class="label">Hobbies</span>
    <input type="checkbox" name="hobby" id="hel" value="hel">
    <label for="hel">hel</label>
    <input type="checkbox" name="hobby" id="pickle" value="pickle">
    <label for="pickle">Pickle eating</label>
    <input type="checkbox" name="hobby" id="walnut" value="walnut">
    <label for="walnut">Making walnut butter</label>
</div>

function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );}

$( "select" ).change( displayVals );
displayVals();

/

but when I change the JQuery Selector to input it returs multipleValues.join() is not a function!

function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "input[name='hobby']:checked" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
}

$( "input" ).change( displayVals );
displayVals();

so what am I doing wrong?

so this works fine

HTML

<p></p>
<select id="single">
    <option>Single</option>
    <option>Single2</option>
</select> 
<select id="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
</select>

<div>
    <span class="label">Hobbies</span>
    <input type="checkbox" name="hobby" id="hel" value="hel">
    <label for="hel">hel</label>
    <input type="checkbox" name="hobby" id="pickle" value="pickle">
    <label for="pickle">Pickle eating</label>
    <input type="checkbox" name="hobby" id="walnut" value="walnut">
    <label for="walnut">Making walnut butter</label>
</div>

function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );}

$( "select" ).change( displayVals );
displayVals();

http://jsfiddle/bfha4881/

but when I change the JQuery Selector to input it returs multipleValues.join() is not a function!

function displayVals() {
var singleValues = $( "#single" ).val();
var multipleValues = $( "input[name='hobby']:checked" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + multipleValues.join( ", " ) );
}

$( "input" ).change( displayVals );
displayVals();

so what am I doing wrong?

• javascript
• jquery
• forms
• input

Share Improve this question Follow edited May 8, 2015 at 9:16 Ziem 6,69788 gold badges5656 silver badges8686 bronze badges asked May 8, 2015 at 8:19 yokimotoyokimoto 4011 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try

var values = [];    
$( "input[name='hobby']:checked" ).each(function(){
    values.push($(this).val());
});
var str = values.join(", ");

Also, you can concatenate directly in the "each", but remember to remove the ", " from the last loop.

For input elements, the returned value will be string, so for array of checkboxes you can iterate over checked inputs and then use .map() to create an array as below

function displayVals() {
    var singleValues = $("#single").val();
    var multipleValues = $("#multiple").val() || [];
    var hobbies = $('input[name="hobby"]:checked').map(function () {
        return this.value;
    }).get();
    $("p").html("<b>Single:</b> " + singleValues +
        " <b>Multiple:</b> " + multipleValues.join(", ") +
        " <b>Hobies:</b> " + hobbies.join(", "));
}

$("select, input").change(displayVals);
displayVals();

Demo: Fiddle

You need to get all checkboxes, you can do that with .each() function...

var checkBoxes = "";
function displayVals() {
  var singleValues = $( "#single" ).val();
  $( "input[name='hobby']:checked" ).each(function() {
        checkBoxes += $(this).val() + " ";
    });

  $( "p" ).html( "<b>Single:</b> " + singleValues +
    " <b>Multiple:</b> " + checkBoxes );
    checkBoxes = "";
}

Here is working example: jsfiddle