复选框从<a href="http://jsfiddle.net/dn4jv9a5/" rel="nofollow noreferrer">here</a>选择一个范围的中继

问题描述：

使用代码，我能够使用的选中/清除功能，但一旦我把它改成一个中继器，在范围选项不选中每个复选框了..复选框从<a href="http://jsfiddle.net/dn4jv9a5/" rel="nofollow noreferrer">here</a>选择一个范围的中继

任何帮助，将不胜感激。

<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>

看到这个小提琴https://jsfiddle.net/MamdouhFreelancer/s83d9ogz/如果我误解或没有。 –

你是什么意思关于直放站？你的意思是你的代码不适用于多复选框吗？ –

我忘记了小提琴。如果你点击一个复选框，然后按住Shift并点击其他复选框，它会检查所有这些复选框。当我在中继器中使用它时，上面生成的html，Range选择不起作用。 –

答

参见本实施例中

我存储在lch阵列检查.index()并且如果未选中除去。
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>

复选框从here选择一个范围的中继

相关推荐