JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <h1>Главный chekbox <input type="checkbox" id="golCheck" /></h1>
  <div id="checkBody">
    <div class='left'>
      <p>
        1 <input type="checkbox"  class='tex1'/>
      </p>
      <p>
        2 <input type="checkbox"  class='tex2'/>
      </p>
    </div>
    <div class='right'>
      <p>
        1 <input type="text" value='checkBox' class='tex1'/>
      </p>
      <p>
        2 <input type="text" value='checkBox' class='tex2'/>
      </p>
    </div>
  </div>
</div>

CSS

#container {
  margin: auto;
  border: 1px solid #000;
  padding: 10px;
}
#checkBody {
  border: 1px solid #000;
}
.left {
  float: left;
  border-right: 1px solid #000;
  padding: 10px;
}
.right {
  padding: 10px;
}
p {height:30px}

JavaScript

$(function() {
  var thisClass
  $('#golCheck').change(function() {
    $('#checkBody').fadeToggle('slow');
  });
  
  $('input').change(function() {    
    if ($(this).attr('type') == 'text') {
      return false;
    } else {      
      thisClass = $(this).attr('class');
      if ($('.right .' + thisClass).val() == 'checkBox') {
        var tmp = new Boolean(false);
        $('.right input').each(function() {
          if (tmp) {
            tmp = false
          } else {
            tmp = true
          }
          if ($(this).attr('class') == thisClass) {
            if ($(this).val() == 'checkBox') {            
              if (tmp) {
                $(this).val('Четный')
              } else {
                $(this).val('Нечетный')
              }
            }             
          } else {
            $(this).val('checkBox')
          }
        })
      }
    }
  })
})