jeudi 20 avril 2017

Loop that allows me to sperate checkboxes into two, then evaluate each group

What if I want to add a loop that allows me to separate the checkboxes into a group of 2 and then evaluate each group of two (seeing what ASCII character it matches). How can I add that type of effect/code? (I am trying to replace the script below that does the same effect but evaluate each group of two). The effect of the current script allows me to do the following: when selecting the top checkboxes, I then select flip button causing the check boxes in the bottom to be checked (corresponding to the top). Thank you for your time, and assistance.

<script>
$(document).ready(function(){
  $("#copy").on('click', function (e) {
      $(':checkbox[class^=uni]:not([id$=_flip])').each(function(index, element) {
          if (element.checked) {
              $('#' + element.id + '_flip').prop('checked', true);
          }

      });
  });
});
</script>

<script src="http://ift.tt/1oMJErh"></script>


    <table dir="rtl" class="not_opposite">
   <tr>
      <td  class="dot_wrap">
         <label for="A1"><span class="hidden">A-1</span>
         <input type="checkbox" value="A1" name="A1" id="A1" tabindex="1" class="uni"> 
         <span aria-hidden="true">&nbsp;</span>
         </label>
      </td>
      <td class="dot_wrap">
         <label for="A4"><span class="hidden">A-4</span>
         <input type="checkbox" value="A4" name="A4" id="A4" tabindex="4" class="uni">
         <span aria-hidden="true">&nbsp;</span>
         </label>
      </td>
   </tr>
</table>
<table dir="rtl" class="not_opposite">
   <tr>
      <td  class="dot_wrap">
         <label for="B1"><span class="hidden">B-1</span>
         <input type="checkbox" value="B1" name="B1" id="B1" tabindex="1" class="uni"> 
         <span aria-hidden="true">&nbsp;</span>
         </label>
      </td>
      <td class="dot_wrap">
         <label for="B4"><span class="hidden">A-4</span>
         <input type="checkbox" value="B4" name="B4" id="B4" tabindex="4" class="uni">
         <span aria-hidden="true">&nbsp;</span>
         </label>
      </td>
   </tr>
</table>
<div class="button_wrapper">
   <button class="inline" id="copy">FLIP</button>
   <button class="inline" id="clear">CLEAR</button>
</div>
<table class="opposite">
   <tr>
      <td class="dot_wrap">
         <label for="A1_flip"><span class="hidden">A-1</span>
         <input disabled="true" type="checkbox" value="A1" name="A1" id="A1_flip"> 
         <span class="flip" aria-hidden="true">&nbsp;</span>
         </label>
      </td>
      <td class="dot_wrap">
         <label for="A4_flip"><span class="hidden">A-4</span>
         <input disabled="true" type="checkbox" value="A4" name="A4" id="A4_flip">
         <span class="flip" aria-hidden="true">&nbsp;</span>
         </label>
      </td>
   </tr>
</table>
<table class="opposite">
   <tr>
      <td class="dot_wrap">
         <label for="B1_flip"><span class="hidden">B-1</span>
         <input disabled="true" type="checkbox" value="B1" name="B1" id="B1_flip"> 
         <span class="flip" aria-hidden="true">&nbsp;</span>
         </label>
      </td>
      <td class="dot_wrap">
         <label for="B4_flip"><span class="hidden">B-4</span>
         <input disabled="true" type="checkbox" value="B4" name="B4" id="B4_flip">
         <span class="flip" aria-hidden="true">&nbsp;</span>
         </label>
      </td>
   </tr>
</table>




Aucun commentaire:

Enregistrer un commentaire