jeudi 20 avril 2017

Turning a Jquery checkbox flip effect into a loop

I am trying to loop the following effect: effect where I can check couple check marks, and when I select the "flip" button, the checkmarks at the bottom will appear, corresponding to the top checked boxes. I rather use a .each(function() { loop. How can I turn the script code below into a loop? (Below code does works but I am trying to turn it into a loop.) Thank for your time, and help.

<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="A"> 
         <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="A">
         <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>

Original script below: when the button flip is selected, the opposite class checkmarks are then selected, corresponding to the not opposite_checkboxes

<script>
   $(document).ready(function(){


   var ID_top
   var ID_btm

   $("#copy").click(function(){

   for (i=1; i<=6; i++)
   {
   ID_top = "#A" + i;
   ID_btm = ID_top + "_flip";


   if ($(ID_top).prop("checked")){ 
   $(ID_btm).prop("checked","checked");
   }

   }

   });
</script>




Aucun commentaire:

Enregistrer un commentaire