jQuery

Question

我有一个表格，我在其中请求大量数据以加入 cakePHP3.5 项目 table。该字符串由 space 分隔的因子 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

我建议：

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

这是包含两个这样的块的工作片段：

$(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>

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

jQuery - Add combinations to the string and repeat this for many input fields of a form

html

javascript

cakephp-3.0