Multiple checkboxes

get values from checkbox

by drmrsan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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-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>

CSS

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

#main-group{
  display: none;
  margin: 10px 0;
}

JavaScript

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