JSFiddle - React, Tailwind, and code Playground

by philphil

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js&quot;"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form id="test" action="#" method="post">
  <div>
    <input type="checkbox" name="check" class='checkbox1' id="check1" />
    <input type="checkbox" name="check" class='checkbox2 hidden' id="check2" />
  </div>
</form>

JavaScript

$(document).ready(function() {

  $('.checkbox1').change(function(e) {
    visibleCheckbox = $(this);
    console.log('visibleCheckbox', visibleCheckbox);
    name = $(this).attr('name');

    $('.checkbox2').each(function() {
      hiddenCheckbox = $(this);
      console.log('old hiddenCheckbox', hiddenCheckbox);
      console.log('visibleCheckbox', visibleCheckbox);
      console.log('clone', visibleCheckbox.clone(true));
      console.log('clone2', hiddenCheckbox.clone(true));
      $(this).replaceWith(visibleCheckbox.clone(true));
      console.log('new hiddenCheckbox', this);
      //$(this).trigger('change');
    });

    //  $(selector).hasParent('td.nested').trigger('change');
    //  console.log('Changed!', this);

  });
});