Question

所以这很好用

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.net/bfha4881/

但是当我更改JQuery Selector以输入它时 multipleValues.join（）不是函数！

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

所以我做错了什么？

Answer 1

对于输入元素，返回的值将是字符串，因此对于复选框数组，您可以迭代已检查的输入，然后使用.map()创建一个数组，如下所示

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

演示：Fiddle

Answer 2

尝试

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

此外，您可以直接在“each”中连接，但请记住从最后一个循环中删除“，”。

Answer 3

您需要获取所有复选框，您可以使用.each()功能...

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 = "";
}

以下是工作示例：jsfiddle

在变量或数组中存储多个复选框值

http://jsfiddle.net/bfha4881/

3 个答案: