如何動態地從多個復選框（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>