Nasıl shift-select GMail gibi birden fazla onay kutularını miyim?

SORU

18 Mart 2009, ÇARŞAMBA

Nasıl shift-select GMail gibi birden fazla onay kutularını miyim?

GMail, kullanıcı e-posta listesinde bir onay kutusunu tıklatın, Shift tuşunu basılı tutun ve ikinci bir onay kutusu seçin. JavaScript sonra iki checboxes arasında olan kutuları/seçimini seçer.

Bunun nasıl olduğunu merak ediyorum? Bu bir WordPress kullanmak (ya da karmaşık) bazı temel JavaScript?

CEVAP

18 Mart 2009, ÇARŞAMBA

Jquery kullanan kendi kendine yeten demo: bir mektup yazdım

    		var lastChecked = null;
    
            $(document).ready(function() {
                var $chkboxes = $('.chkbox');
                $chkboxes.click(function(e) {
                    if(!lastChecked) {
                        lastChecked = this;
                        return;
                    }
    
                    if(e.shiftKey) {
                        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;
                });
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
    </head>
    <body>
    	<input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/>
    	<input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/>
    	<input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/>
    	<input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/>
    	<input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/>
    	<input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/>
    	<input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/>
    
    </body>
    </html>

Bunu Paylaş: