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

横本

所以这很好

的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来输入时,它重现了multiValues.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();

那我在做什么错呢?

阿伦·约翰尼(Arun P Johny)

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

演示:小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在复选框中存储多个值以检查php

复选框的绑定值未存储到数组中

从复选框中获取多个值

在复选框中接受多个值

Django中数组的复选框值

在本地存储中存储多个复选框输入

如何使用JQuery一次更新数组变量上的多个复选框值

在本地存储中存储复选框值

是否将所有选中的复选框值存储在一个变量中?

在一个 localStorage 键中存储多个复选框值

如何根据复选框的值将数据存储到多个MySQL表中?

如何在angular2中以反应形式存储多个复选框值?

如何接收多个复选框值并正确存储在数据库中?

Laravel-在数据库中存储多个复选框表单值

将多个复选框值存储到 php mysqli 数据库中

PHP:如何从$ _POST保存多个复选框数组在变量中

如何获取复选框值并存储在数组中

如何在PHP数组中存储所有复选框值

如何使用数组等文件中的存储值启用复选框

将选中的复选框值及其名称存储在二维数组中

在复选框上,单击将值存储到数组中

如何在React.js中将选中的复选框的值存储在数组中

如何获取多个复选框的值并使用复选框中的值执行增量

如果值等于数组中的变量,如何不显示复选框

如何将多个复选框值传递到数组中

仅在状态中存储 .checked 复选框值?

使用true或false在JSON中存储复选框值

选择javascript中的所有复选框-复选框具有不同值的数组

在Ember.js中处理多个复选框数组