javascript - 如何动态地从多个复选框(jquery)获取值并将其复制到textarea？

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

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

我要实现的是：


如果选中了“剪切图像”复选框（默认情况下所有其他展开的复选框），则将文本值“剪切图像：上，左，右，下”附加到文本区域
如果未选中其中一个展开的复选框（请说“向上”），请从文本区域的附加文本中删除其值，然后仅显示选定的复选框，“剪切图像：左，右，下”


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。

我将不胜感激有关如何实现此行为的任何建议。

谢谢。

最佳答案

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


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


这是更新版本。请注意略有不同的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>