JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<div class="div_checkbox">
  <input type='checkbox' class='class_checkbox' name='checkbox1' value='checkbox 1.1'>
  <input type='checkbox' class='class_checkbox_2' name='checkbox2' value='checkbox 2.1'>
  <br>
  <input type='checkbox' class='class_checkbox' name='checkbox1' value='checkbox 1.2'>
  <input type='checkbox' class='class_checkbox_2' name='checkbox2' value='checkbox 2.2'>
  <br>
  <input type='checkbox' class='class_checkbox' name='checkbox1' value='checkbox 1.3'>
  <input type='checkbox' class='class_checkbox_2' name='checkbox2' value='checkbox 2.3'>
</div>

<input type="text" id="test">

JavaScript

$('[type=checkbox]').on('click', function() {
  const group1CheckedItems = $('.class_checkbox:checked')
  const group2CheckedItems = $('.class_checkbox_2:checked')
  
  const value = [group1CheckedItems.val(), group2CheckedItems.val()]
  		.filter(v => v)
        .join('')
 

  $('#test').val(value)
})