如何动态地从多个复选框（jquery）获取值并将其复制到textarea？

Question

我有一个“剪切图像”复选框，它将在选中时扩展另外四个复选框（上，左，右，下），您可以在其中选择剪切图像的位置。

默认情况下，将选中这些展开的复选框。

我想要实现的是：

1. 如果选中了“剪切图像”复选框（默认情况下所有其他展开的复选框），则将文本值“剪切图像：上，左，右，下”附加到文本区域

2. 如果未选中其中一个展开的复选框（请说“向上”），请从文本区域的附加文本中删除其值，然后仅显示选定的复选框，“剪切图像：左，右，下”

HTML

<input type="checkbox" id="cut-image">
<label for="">Cut image</label>


<div id="main-group">

  <input type="checkbox" class="cut-image-up" checked>
  <label for="">up</label>

  <input type="checkbox" class="cut-image-left" checked>
  <label for="">left</label>

  <input type="checkbox" class="cut-image-right" checked>
  <label for="">right</label>

  <input type="checkbox" class="cut-image-down" checked>
  <label for="">down</label>

</div>


<textarea name="" id="checkbox-values" cols="20" rows="10"></textarea>

Java脚本

$(function(){

 $('#cut-image').on('change', function(){
   $('#main-group').toggle();

   if($(this).is(':checked')){
     $('#checkbox-values').val('Cut image (up, left, right, down)');
   }else{
     $('#checkbox-values').val('');
   }

  });
})

这也是一个jsfiddle 。

我将对如何实现此行为的任何建议表示赞赏。

谢谢。

Answer 1

这不会完全解决所有各种情况，但会为您提供一个良好的起点

将值添加到复选框，并使用jQuery map（）构建这些值的数组。 然后join()这些数组值添加到文本

<input type="checkbox" class="cut-image-up" value="up" checked>

JS

$('#cut-image').on('change', function() {
  $('#main-group').toggle();

  if ($(this).is(':checked')) {

    // array of checked checkbox values
    var directions = $('#main-group :checkbox:checked').map(function() {
      return this.value
    }).get().join(', ');

    $('#checkbox-values').val('Cut image (' + directions + ')');
  } else {
    $('#checkbox-values').val('');
  }

});

演示

Answer 2

总是有大约十亿种方法可以做这样的事情。 在我看来，您需要做一些事情：

• 一种将每个复选框与其方向相关联的方法
• 侦听复选框更改的内容-选中和未选中
• 每次更改复选框时，我们都会抓住所有选中的复选框，然后将方向重新附加到文本框

这是更新版本。 请注意略有不同的HTML ...

 $(function() { $('#cut-image').on('change', function() { $('#main-group').toggle(); if ($(this).is(':checked')) { setCheckboxValues(); } else { $('#checkbox-values').val(''); } $('.cut-image').on('change', function() { setCheckboxValues() }) }); }) function setCheckboxValues() { const allCheckedText = $('input.cut-image:checked').map(function() { return this.value; }).get() $('#checkbox-values').val(`Cut image (${allCheckedText.join(', ')})`); } 

 #cut-image, #main-group, #checkbox-values { display: block; margin: 10px 0; } #main-group { display: none; margin: 10px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="cut-image"> <label for="">Cut image</label> <div id="main-group"> <input type="checkbox" class="cut-image" checked value="up"> <label for="">up</label> <input type="checkbox" class="cut-image" checked value="left"> <label for="">left</label> <input type="checkbox" class="cut-image" checked value="right"> <label for="">right</label> <input type="checkbox" class="cut-image" checked value="down"> <label for="">down</label> </div> <textarea name="" id="checkbox-values" cols="20" rows="10"></textarea>