将jQuery复选框翻转效果转换为循环

时间:2017-04-20 16:54:47

标签: jquery html loops checkbox

我试图循环以下效果:效果我可以检查几个复选标记,当我选择"翻转"按钮,底部的复选标记将出现,对应于顶部复选框。我宁愿使用.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");
          }
        }
      });
});
&#13;
<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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

  

我宁愿使用.each(function(){loop。

您可以选择所有ID为以大写字母A开头且不带后缀_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);
    }
});

摘录:

&#13;
&#13;
$(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);
          }
      });
  });
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以遍历顶部的那些,并且对于每个选中的,您可以检查底部的相应内容。

对于.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);