添加和删除输入复选框的值

Question

我编写的脚本允许用户选择复选框，并将所选框的值添加到输入中，并以逗号分隔。

​

$(document).ready(function() {
  var variable = 1
  $("#add").click(function() {
    var element = $(".test.hidden").clone(true);
    var testInputs = element.find(".testInputs").click(clickHandler);


    testInputs.attr("unique-index", variable);
    var target = element.find('.user_input2 #insert');
    target.attr("unique-identifier", variable)
    element.removeClass("hidden").appendTo(".paste:last");
    variable += 1;

  });

  function clickHandler() {
    console.log($(this).attr('unique-index'));
    const index = $(this).attr('unique-index')
    const targetsValue = $(`#insert[unique-identifier="${index}"]`).val();
    console.log('sup', targetsValue)
    const combo = targetsValue ? `${targetsValue}, ${$(this).val()}` : $(this).val()
    $(`#insert[unique-identifier="${index}"]`).attr('value', combo);
  }


  $(".test").keyup(function() {
    var test;
    console.log('sup')
    if ($(".test").is(":checked")) {

      test = $(".test").val();
    };

    $("#insert").val(test);

  });

  $("#testbtn").click(function() {
    $(".test").keyup();
  });

});

.hidden {
  display: none;
}

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

<button id="add">Add</button>

<div class="test hidden">

  <div class="user_input2">
    <table>
      <thead>
        <tr>
          <th>Pick Option</th>
        </tr>
      </thead>
      <tbody>
        <tr id="append">
          <td><input class="testInputs" name="test" value="1" type="checkbox">Option1</td>
          <td><input class="testInputs" name="test" value="2" type="checkbox">Option2</td>
          <td><input class="testInputs" name="test" value="3" type="checkbox">Option3</td>
        </tr>
      </tbody>
    </table>
    <input type="text" id="insert" name="check[]">
    <button class="hidden" id="testbtn">Calc</button>
  </div>
</div>



<div class="paste">
</div>

​

在取消复选框时，我似乎无法去除附加值。我需要识别复选框，然后根据选中的状态删除值。如果有人能帮忙，我会非常感激的。

附注：它也不应该允许值的重复，就像您不止一次按输入检查时所看到的那样。

Answer 1

您应该获得变更事件上的checked复选框值

//Added event listeners to element
$(document).on('change', '.testInputs', function () {
    //Target common ansestor
    var testContainer = $(this).closest('.test');
    //get checked checkboxes value in an array
    var checked = testContainer.find(':checked').map(function () {
            return this.value;
        }).get();

    //Target the textbox and set its value
    testContainer.find(".insert").val(checked.join(','));
});

另外，由于HTML中的标识符必须是唯一的，所以应该使用CSS类代替

<input type="text" class="insert" name="check[]">

​

$(document).ready(function() {
  var variable = 1
  $("#add").click(function() {
    var element = $(".test.hidden").clone(true);
    var testInputs = element.find(".testInputs").click(clickHandler);


    testInputs.attr("unique-index", variable);
    var target = element.find('.user_input2 #insert');
    target.attr("unique-identifier", variable)
    element.removeClass("hidden").appendTo(".paste:last");
    variable += 1;

  });

  function clickHandler() {
    const index = $(this).attr('unique-index')
    const targetsValue = $(`#insert[unique-identifier="${index}"]`).val();
    const combo = targetsValue ? `${targetsValue}, ${$(this).val()}` : $(this).val()
    $(`#insert[unique-identifier="${index}"]`).attr('value', combo);
  }
  
  //Added event listeners to element
  $(document).on('change', '.testInputs', function() {
    //Target common ansestor
    var testContainer = $(this).closest('.test');
    //get checked checkboxes value in an array
    var checked = testContainer.find(':checked').map(function() {
      return this.value;
    }).get();

    //Target the textbox and set its value
    testContainer.find(".insert").val(checked.join(','));
  });
});

.hidden {
  display: none;
}

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

<button id="add">Add</button>

<div class="test hidden">

  <div class="user_input2">
    <table>
      <thead>
        <tr>
          <th>Pick Option</th>
        </tr>
      </thead>
      <tbody>
        <tr id="append">
          <td><input class="testInputs" name="test" value="1" type="checkbox">Option1</td>
          <td><input class="testInputs" name="test" value="2" type="checkbox">Option2</td>
          <td><input class="testInputs" name="test" value="3" type="checkbox">Option3</td>
        </tr>
      </tbody>
    </table>
    <input type="text" class="insert" name="check[]">
    <button class="hidden" id="testbtn">Calc</button>
  </div>
</div>

<div class="paste">
</div>

​