Question

我有很多复选框。我想从它们获取值并将其传递给span和hidden输入。当我单击一个复选框时，它工作正常。但是，当我点击多个复选框时，它只传递给我最后一个值。怎么了？请帮帮我。还有其他问题。使用input或textarea存储多个值是否合适？

＆＃13;

    function t() {
        $('input[type="checkbox"]:checked').map(function(){
            var dataAttr = $(this).attr('name');
            var dataAttrVal = $(this).val();
            $('input[name="' + dataAttr + '-value"]').val(dataAttrVal);
            $('#summary_' + dataAttr).html(dataAttrVal);
            console.log(dataAttr);
            console.log(dataAttrVal);
        }).get().join();
    };   

    $('input[type="checkbox"]').on('click', function(){
        t();
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="sause" id="sause-garlic" value="Sos czosnkowy" class="sause">                        
                                <label for="sause-garlic">garlic</label>
                                <input type="checkbox" name="sause" id="sause-tabasco" value="Sos tabasco" class="sause">                        
                                <label for="sause-tabasco">tabasco</label>                               
<br>
                                <input type="checkbox" name="vegies" id="vegies-tomato" value="Tomato" class="vegies">                        
                                <label for="vegies-tomato">tomato</label>

                                <input type="checkbox" name="vegies" id="vegies-tomato" value="potato" class="vegies">                        
                                <label for="vegies-tomato">potato</label>


<input type="text" name="sause-value">
<input type="text" name="vegies-value">                      

<span id="summary_sause" class="summary"></span>
  <span id="summary_vegies" class="summary"></span>

＆＃13;

Answer 1

当您使用.html()方法时，您基本上会覆盖那里的所有内容。您可以替换该行：

$('#summary_' + dataAttr).html(dataAttrVal);

使用：

var s = $('#summary_' + dataAttr);
s.html(s.html() + dataAttrVal);

或者，您可以使用.append()方法添加到现有值：

$('#summary_' + dataAttr).append(dataAttrVal);

这是您的问题的答案，但您的代码中还有许多其他问题需要修复。我会让你自己探索它们，如果你遇到一些困难，请发一个新答案，我们会帮助你。

关于你的第二个问题：使用输入或textarea存储多个值是否合适？一般来说，这不是一个好主意，但在某些情况下它可以正常。我们需要知道您的具体情况和要求，以便提供一个好的建议。

jQuery将数据从map函数传递给input和span

1 个答案: