Question

嗨，伙计们需要你的帮助。我有一个javascript函数，它将复选框值传递给textarea'收件人'，它在检查/取消选中时工作正常，并相应地将值传递到textarea。我想要的是有一个复选框来检查所有复选框并将值附加到textarea。

下面是我的javascript将vales传递给textarea'收件人'：

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）当您对复选框进行更改时，您需要选中所有复选框并更新为textarea。

（2）函数updateAllChecked将处理所有检查和更新。

（3）选中全部，如果选中，则将所有电子邮件复选框设置为选中，然后致电.change()以触发更改事件。

＆＃13;

$("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());
    }
  })
}

＆＃13;

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

＆＃13;

Answer 2

在填充数组后，尝试使用带有最终join()的数组。我认为它更清洁了：

    checkbox.onclick = (function(chk){
        return function() {
            var valueArray = [];
            for (var j = 0; j < checkboxes.length; j++) {
                if (checkboxes[j].checked) {
                    valueArray.push(checkboxes[j].value); //add value to array
                }
            }
            textbox.value = valueArray.join(", "); //join with comma separators
        }
    })(checkbox);

你也可以提取函数并调用提取的函数，而不是将函数的内容添加到每个复选框，但是没有看到你的HTML，它很难辨别出你的确切内容。这样做以及为什么你以你的方式循环。

Answer 3

嗨，大家好，我的html和php，我从db检索收件人电子邮件：

here is my html with php, I retrieve recipients email from db.:           <?php 
      $i='';
      if($result_applied_jobs): ?>
         <div class="tg-wrap">
             <table id="tg-s6tTH" class="tg" style="width: 100%;">
                <tr><th style="width: 12%"><label><input type="checkbox" name="addall" id="addall"/>&nbsp;Select all</label></th><th style="width: 7%">Sl. No.</th><th style="width: 20%">Applicant's Name</th><th style="width: 25%">Job Title</th><th style="width: 13%">Apply Date</th><th>Cover Letter</th></tr><?php
            foreach($result_applied_jobs as $row_applied_job):
        $i++;
        ?> 
       <tr>
            <td><input type="checkbox" value="<?php echo $row_applied_job->email;?>" name="email" id="email"></td>
            <td><?php echo $i;?></td>
            <td><a href="<?php echo base_url('candidate/'.$this->custom_encryption->encrypt_data($row_applied_job->job_seeker_ID));?>"><?php echo $row_applied_job->first_name.' '.$row_applied_job->last_name;?></a></td>
            <td><a href="<?php echo base_url('jobs/'.$row_applied_job->job_slug);?>"><?php echo $row_applied_job->job_title;?></a></td>
            <td><i class="fa fa-calendar-check-o" aria-hidden="true" style="color: #5f6f81"></i>&nbsp;<?php echo date_formats($row_applied_job->applied_date, 'M d, Y');?></td>
            <td><?php echo $row_applied_job->c_letter;?></td>
        </tr>
      <?php     endforeach; ?>
            </table>
            </div><?php
            else:?>
                <div class="alert alert-danger"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>&nbsp;No application received</div>
      <?php endif;?>

这是textarea的另一部分：

<textarea class="form-control" id="recipientss" readonly="" placeholder="check the checkbox against applicants you want to send a message"><?php echo set_value('recipients');?></textarea>

如何通过单击一个复选框将多个复选框值附加到textarea中

3 个答案: