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

【问题标题】：storing multiple checkboxes value in a variable or array将多个复选框值存储在变量或数组中
【发布时间】：2015-05-08 08:19:04
【问题描述】：

所以这很好用

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 选择器更改为输入时，它会返回 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();

那我做错了什么？

【问题讨论】：

标签： javascript jquery forms input

【解决方案1】：

试试

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

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

【讨论】：

【解决方案2】：

对于输入元素，返回值将是字符串，因此对于复选框数组，您可以遍历选中的输入，然后使用.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

【讨论】：

你能解释一下最后一部分吗：var multipleValues = $("#multiple").val() || [];做：.val()|| []表示单值还是多值？
@Sam-Gh。如果选择元素是多选，则.val() 将返回一个选定值的数组。但如果没有选择任何值，则返回null，因此|| [] 用于在未选择元素时返回一个空数组

【解决方案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

【讨论】：