复选框选择转发器中的范围

Question

使用here中的代码，我可以使用检查/取消选中功能，但是一旦我将其放入转发器，Range选项就不再选中每个复选框..

任何帮助将不胜感激。

<script>

$(document).ready(function () {
    var lastChecked = null;
    var $chkboxes = $('input[type=checkbox]:not(#checkAll)');

    $chkboxes.click(function (e) {
        console.log("checkbox clicked");
        if (!lastChecked) {
            console.log("This was the first checkbox clicked");
            lastChecked = this;
            return;
        }
        if (e.shiftKey) {
            console.log("Shift held");
            var start = $chkboxes.index(this);
            var end = $chkboxes.index(lastChecked);
            $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
        }
        lastChecked = this;
    });

    $("#checkAll").click(function () {
        if ($("#checkAll").is(':checked')) {
            $("input[type=checkbox]").each(function () {
                $(this).prop("checked", true);
            });

        } else {
            $("input[type=checkbox]").each(function () {
                $(this).prop("checked", false);
            });
        }
    });


});


</script>

结果HTML

   <td>                                                     
    <ul class="list-unstyled checkbox-list">
         <li>
            <label class="checkbox">
                <input id="ContentPlaceHolder1_ctl01_repGrid_chkItem_0" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01$repGrid$ctl01$chkItem" />
                <i></i>Select
                 </label>
        </li>
    </ul>
    </td>

Answer 1

参见此示例

• 我在.index()数组中存储已检查lch并删除if 未选中状态。
• from变量是当前选中的lch[lch.length-1]之前的数组中的最后一个索引。
当前已检查
• i变量.index()。
• 如果最后一次点击是checked，请检查from和i索引之间的所有内容。
• 如果最后一次点击是unchecked，则取消选中from和i索引之间的所有内容。

$(document).ready(function() {

  var $chkboxes = $('input[type=checkbox]:not(#checkAll)');
  var lch = [];
  $chkboxes.click(function(e) {
    var checked = $(this).is(":checked");
    var i = $(this).index('input[type=checkbox]:not(#checkAll)');
    var from = lch[lch.length - 1] || 0;
    if (checked) {
      lch.push(i);
    } else {
      lch.splice(lch.indexOf(i), 1);
    }
    if (e.shiftKey) {
      $('input[type=checkbox]:not(#checkAll)').each(function(c) {
        if (checked && i > from && c >= from && c < i) {
          $(this).prop("checked", true);
        }
        if (!checked && i < from && c >= i && c <= from) {
          $(this).prop("checked", false);
        }
      });
    }
  });

  $("#checkAll").click(function() {
    if ($("#checkAll").is(':checked')) {
      $("input[type=checkbox]").each(function() {
        $(this).prop("checked", true);
      });

    } else {
      $("input[type=checkbox]").each(function() {
        $(this).prop("checked", false);
      });
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="float:left">
  <input type="checkbox" id="checkAll">Check All</input>
</div>
<div class="float:left">
  <input type="checkbox">1</input>
</div>
<div class="float:left">
  <input type="checkbox">2</input>
</div>
<div class="float:left">
  <input type="checkbox">3</input>
</div>
<div class="float:left">
  <input type="checkbox">4</input>
</div>
<div class="float:left">
  <input type="checkbox">5</input>
</div>
<div class="float:left">
  <input type="checkbox">6</input>
</div>
<div class="float:left">
  <input type="checkbox">7</input>
</div>
<div class="float:left">
  <input type="checkbox">8</input>
</div>
<div class="float:left">
  <input type="checkbox">9</input>
</div>
<div class="float:left">
  <input type="checkbox">10</input>
</div>
<div class="float:left">
  <input type="checkbox">1</input>
</div>
<div class="float:left">
  <input type="checkbox">2</input>
</div>
<div class="float:left">
  <input type="checkbox">3</input>
</div>
<div class="float:left">
  <input type="checkbox">4</input>
</div>
<div class="float:left">
  <input type="checkbox">5</input>
</div>
<div class="float:left">
  <input type="checkbox">6</input>
</div>
<div class="float:left">
  <input type="checkbox">7</input>
</div>
<div class="float:left">
  <input type="checkbox">8</input>
</div>
<div class="float:left">
  <input type="checkbox">9</input>
</div>
<div class="float:left">
  <input type="checkbox">10</input>
</div>