複選框從<a href="http://jsfiddle.net/dn4jv9a5/" rel="nofollow noreferrer">here</a>選擇一個範圍的中繼

-1

使用代碼，我能夠使用的選中/清除功能，但一旦我把它改成一箇中繼器，在範圍選項不選中每個複選框了..複選框從<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>

來源

2016-11-07 Tim Cadieux

看到這個小提琴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>

來源

2016-11-08 01:08:51

複選框從<a href="http://jsfiddle.net/dn4jv9a5/" rel="nofollow noreferrer">here</a>選擇一個範圍的中繼

回答

相關問題