javascript - jQuery - 将组合添加到字符串中，并对表单的许多输入字段重复此操作

Question

我有一个表单，我在 cakePHP3.5 项目中请求连接表的大量数据。该字符串由由空格分隔的因素 A、B、C 和 D 的组合组成。例如:BD AC ABCD AD B CD。我找到了如何为这样一个字段编写这个字符串。

首先，我将所需的组合写入文本框Result，然后使用Add按钮将它们拼接在一起。

如何在不编写冗长的 jQuery 的情况下为许多人重复此操作？基本上我需要重复 50 次以下的内容，但我无法为所有这些多个复选框找到合适的选择器。下面的复选框 1 是为了说明目的，强调我将有不同的复选框和许多这样的输入字段。

这是我的第一个 jQuery，所以请耐心等待:)

$(document).ready(function() {
 
 $('.factor-checkbox').click(function() {
    var text = $('#result0');
    text.val('');
    $(".factor-checkbox:checked").each(function() {
    text.val(text.val() + $(this).val());
    });
    
   
  });
    $("#btn0").click(function(){
    var text1 = $('#combinations0');
    text1.val(text1.val() + ' ' + $('#result0').val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>

<label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>

<label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>

<label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>

<label for="result0">Result </label><input type="text" id="result0"/>

<button type="button" id="btn0">Add</button>

<div class="input checkbox"><label for="items-0-id"><input type="checkbox" name="items[0][id]" value="1" id="items-0-id">1</label></div>

<div class="input text"><label for="Combinations">Combinations</label><input type="text" id="combinations0"/></div>

Answer 1

我建议:

• 将每个重复 block (每个重复 block 有 4 个复选框等)包装在一个单独的容器元素中:这将有助于解决属于在一起的不同元素。
• 不必要时不要使用 id 属性:对于标签，当您将 input 包装在 label 内时，您不需要它们元素。而是使用类名称。这将有助于生成所有 50 个区 block
• 在每个事件处理程序中确定单击发生的部分，然后将其用作您执行的所有其他 jQuery 选择的范围(通过使用 $() 的第二个参数 -- 或 .find().

这是包含两个这样的 block 的工作片段:

$(function() {
    function mapValues(elem) {
        return $(elem).val();
    }
    $(".factor-checkbox").click(function() {
        var $section = $(this).closest(".section");
        var $text = $(".result", $section);
        $text.val($.map($(".factor-checkbox:checked", $section), mapValues).join(""));
    });
    $(".add").click(function() {
        var $section = $(this).closest(".section");
        var $combi = $(".combinations", $section);
        $combi.val(($combi.val() + " " + $(".result", $section).val()).trim());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section">
    <label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
    <label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
    <label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
    <label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>

    <label>Result <input type="text" class="result"></label>

    <button type="button" class="add">Add</button>
    
    <div class="input text">
        <label>Combinations <input type="text" class="combinations"></label>
    </div>
</div>
<div class="section">
    <label><input type="checkbox" name="A" value="A" class="factor-checkbox">A</label>
    <label><input type="checkbox" name="B" value="B" class="factor-checkbox">B</label>
    <label><input type="checkbox" name="C" value="C" class="factor-checkbox">C</label>
    <label><input type="checkbox" name="D" value="D" class="factor-checkbox">D</label>

    <label>Result <input type="text" class="result"></label>

    <button type="button" class="add">Add</button>

    <div class="input text">
        <label>Combinations <input type="text" class="combinations"></label>
    </div>

</div>