Question

我正在尝试在单个页面上跨多个表单序列化所有选中的复选框值。当我序列化数据时，我控制台记录复选框的名称加上已检查的值。如果只选中了一个框，控制台将显示如下名称 - 值对：'one：Flat'。如果复选框选中了多个框，则控制台将显示如下名称 - 值对：'one：Flat，Slope'。

我有它工作，但是，我正在尝试找到一种更有效的方式来查看可能存在于多个表单中的所有已选中复选框。

以下是一个页面的片段，其中包含两种形式，每种形式都有复选框。

<form id="formOne">
<h1>Form one</h1>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="Flat" name="one">
Flat
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="Slope" name="one">
Slope
</label>
</div>
</form>
<br>
<form id="formTwo">
<h6>Form two</h6>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="Strong Winds"
name="two">
Strong Winds
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="Ice"
name="two">
Ice
</label>
</div>
</form>


<br>
<input id="one_checkboxes" type="hidden" name="one">
<input id="two_checkboxes" type="hidden" name="two">
<div class="text-center">
<button id="clickMe" type="button" class="btn btn-primary">click me</button>
</div>

用户单击按钮后，我将数据序列化并放入JSON对象。然后迭代每个对象，看看是否有与抓取的输入名称相关的任何值。如果那里什么都没有，请跳过它并查看下一个项目。

我检查名称是否与名称匹配，如果是，请抓取已连接的数组值并将该值与名称配对，并说明该复选框已完成。如果复选框再次弹出，如果检查了多个值，则会发生这种情况，我们看到我们已经抓住了这些值并跳过了复选框的其余实例。如果我们看到另一系列复选框等，也会再次发生同样的事情。

$('#clickMe').click(function () {

        var oneArray = [];
        var twoArray = [];

        var oneTouched = 0;
        var twoTouched = 0;

        $('input:checked[name="one"]').each(function () {
            oneArray.push($(this).val());
        });

        $('input:checked[name="two"]').each(function () {
            twoArray.push($(this).val());
        });


        $('#one_checkboxes').val(oneArray.join(', '));
        $('#two_checkboxes').val(twoArray.join(', '));


        var formData = $('form').serializeArray();
        $.each(formData, function () {
            // if any of the inputs through the forms have no input, ignore that name-value pair
            // move onto the next one to add to the report generated
            if (this.value === "") {
                return true;
            }

            if (this.name === "one" && oneTouched === 0) {
                this.value = $('#one_checkboxes').val();
                oneTouched = 1;
            }
            else if (this.name === "one" && oneTouched === 1) {
                return true;
            }

            else if (this.name === "two" && twoTouched === 0) {
                this.value = $('#two_checkboxes').val();
                twoTouched = 1;
            }
            else if (this.name === "two" && twoTouched === 1) {
                return true;
            }

            console.log(this.name + ': ' + this.value);
        });
    });

我正在处理的页面将具有与此类似的多个表单，有时每个表单中都有多个复选框系列。通过具有多个复选框的多个表单获取所有已选中复选框值的最有效方法是什么？没有重复代码？

完整的例子： http://jsfiddle.net/krn65/aocbnn2j/6/

使用jQuery 3.2.1和Bootstrap 4-beta 2

jQuery序列化多个复选框多个表单

0 个答案: