把一個jQuery複選框的翻轉效果變成一個循環

Question

我想循環下面的效果：效果，我可以檢查幾個複選標記，當我選擇「翻轉」按鈕，底部的複選標記將出現，對應於頂部的複選框。我寧願使用.each(function() {循環。我如何將下面的腳本代碼轉換爲循環？ （下面的代碼確實有效，但我試圖將它變成一個循環。）感謝您的時間和幫助。

原始下面的腳本：當選擇按鈕倒裝，所述相反類複選標記然後被選擇，對應於不opposite_checkboxes。

$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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="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>

Answer 1

我寧願使用。每個（函數（）{循環。

您可以選擇具有開頭的大寫字母A的ID的所有複選框元素並以沒有後綴_flip結尾：

$(':checkbox[id^=A]:not([id$=_flip])') 

而且爲了使用每個循環中，您可以：

$(':checkbox[id^=A]:not([id$=_flip])').each(function(index, element) { 
    if (element.checked) { 
     $('#' + element.id + '_flip').prop('checked', true); 
    } 
}); 

的片段：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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="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>

Answer 2

可以遍歷在頂部的，併爲每個選中的一個，你在底部檢查相應的。

對於.not_opposite中包含的每個複選框元素，如果已選中，則將其放在.opposite中的複選框中。否則，你把它拿出來。由於prop接受布爾值，因此可以使用三元運算符使其更快。

var flipCheckbox = function(){ 
    $('.not_opposite [type=checkbox]').each(function(index){ 

     // Selecting opposite checkbox 
     // With the same selection index as the loop current one 
     // Setting prop to true/false according to current loop 

     $('.opposite [type=checkbox]').eq(index) 
     .prop('checked', $(this).is(':checked') ? true : false); 
    }); 
}; 

$('#copy').on('click', flipCheckbox);