javascript - 如何通过单击一个复选框将多个复选框值附加到文本区域

Question

大家好，又需要你们的帮助了。我有一个 javascript 函数，它将复选框值传递到文本区域“收件人”中，它在选中/取消选中时工作正常，并将值相应地传递到文本区域中。我想要的是有一个复选框来检查所有复选框并将值附加到文本区域中。

下面是我将 vales 传递到 textarea 'recipients' 的 javascript:

var textbox = document.getElementsByName("recipients")[0];
var checkboxes = document.getElementsByName("email");
for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onclick = (function(chk){
        return function() {
            var value = "";
            for (var j = 0; j < checkboxes.length; j++) {
                if (checkboxes[j].checked) {
                    if (value === "") {
                        value += checkboxes[j].value;
                    } else {
                        value += ", " + checkboxes[j].value;
                    }
                }
            }
            textbox.value = value;
        }
    })(checkbox);
}

请帮忙。

Answer 1

(1) 当您更改复选框时，您需要选中所有复选框并更新到文本区域。

(2) 函数 updateAllChecked 将处理所有检查和更新。

(3) check all，如果勾选，则设置所有邮件复选框为checked，调用.change()触发change事件。

$("input[name=email]").change(function() {
  updateAllChecked();
});

$("input[name=addall]").change(function() {
  if (this.checked) {
    $("input[name=email]").prop('checked', true).change();
  } else {
    $("input[name=email]").prop('checked', false).change();
  }
});

function updateAllChecked() {
  $('#recipients').text('');
  $("input[name=email]").each(function() {
    if (this.checked) {
      let old_text = $('#recipients').text() ? $('#recipients').text() + ', ' : '';
      $('#recipients').text(old_text + $(this).val());
    }
  })
}

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

<input type="checkbox" name="email" value="email_1">email_1<br>
<input type="checkbox" name="email" value="email_2">email_2<br>
<input type="checkbox" name="email" value="email_3">email_3<br>
<input type="checkbox" name="email" value="email_4">email_4<br>
<br>
<input type="checkbox" name="addall">Add All Email<br>

<textarea id="recipients"></textarea>