मैं GMail जैसे कई चेकबॉक्स कैसे चुन सकता हूं?

86

GMail में, उपयोगकर्ता ईमेल सूची में एक चेकबॉक्स पर क्लिक कर सकता है, Shift कुंजी दबाए रख सकता है और दूसरा चेकबॉक्स चुन सकता है। फिर जावास्क्रिप्ट उन चेकबॉक्सों का चयन / अचयनित करेगा, जो दो चेकोबॉक्स के बीच हैं।

मैं उत्सुक हूं कि यह कैसे किया जाता है? क्या यह JQuery या कुछ बुनियादी (या जटिल) जावास्क्रिप्ट है?

javascript  gmail 
— Ascalonian
स्रोत
4
@ बीसी के जवाब के लिए आसान खोजा। gist.github.com/3784055
— एंडी रे

जवाबों:

184

मैंने एक स्व-निहित डेमो लिखा है जो jquery का उपयोग करता है:

$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var lastChecked = null;

    $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>
स्निपेट का विस्तार करें

— ईसा पूर्व।
स्रोत
8
आप लूप के लिए उपयोग करने के बजाय स्लाइस को कॉल कर सकते हैं। यह इस तरह दिखाई देगा: "$ ('। chkbox')। स्लाइस (न्यूनतम ..., अधिकतम ... + 1) .attr ('चेक किया हुआ, lastChecked.checked)"
— मैथ्यू
10
उत्तर अमूर्त jquery प्लगइन के बिना लंगड़ा है। तो यहाँ आप gist.github.com/3784055
— एंडी रे
3
शिफ्ट-क्लिक के बिना कुछ बक्से की संयुक्त जांच के बाद कई बार शिफ्ट-क्लिक करने के लिए काम करना प्रतीत नहीं होता है। jsfiddle.net/5fG5b
— ग्रेग पेटिट
3
ऐसा इसलिए है क्योंकि यह होना चाहिए .prop('checked', नहीं .attr('checked'। jsFiddle: jsfiddle.net/dn4jv9a5
— केटलीन
3
@schnauss धन्यवाद, आप सही हैं और मैंने जवाब अपडेट कर दिया है। मेरे बचाव में, मूल उत्तर प्रो () उपलब्ध होने से पहले लिखा गया था
— बीसी।
36

यह काफी सरल जावास्क्रिप्ट के माध्यम से किया जाता है।

वे अंतिम चेक बॉक्स की आईडी का ट्रैक रखते हैं और जब दूसरे चेकबॉक्स की जांच की जाती है तो वे शिफ्ट का उपयोग करते हुए यह देखने के लिए शिफ्ट इवेंट विशेषता का उपयोग करते हैं। यदि ऐसा है तो वे दोनों के बीच प्रत्येक चेकबॉक्स की जाँच की गई संपत्ति को सही पर सेट करते हैं ।

यह निर्धारित करने के लिए कि एक बॉक्स की जाँच की जाती है, वे संभवतः चेकबॉक्स पर एक ऑनक्लिक घटना का उपयोग करते हैं

— बेन एस
स्रोत
2
यदि आप चाहते हैं, तो आप मोज़िला डेवलपर नेटवर्क से इस संदर्भ का उपयोग कर सकते हैं: ShiftKey ईवेंट विशेषता , इनपुट तत्व गुण , ऑनक्लिक ।
— फोनिक्स 12
14

हाल ही में, मैंने एक jQuery प्लगइन लिखा है जो उस सुविधा और बहुत कुछ प्रदान करता है।

प्लगइन को शामिल करने के बाद आपको निम्नलिखित कोड स्निपेट के साथ चेकबॉक्स के संदर्भ को शुरू करने की आवश्यकता है:

$('#table4').checkboxes({ range: true });

यहाँ प्रलेखन, डेमो और डाउनलोड का लिंक दिया गया है: http://rmariuzzo.github.io/checkboxes.js/

— रुबेन्स मारियाज़ो
स्रोत
10

ऐसा लगता है कि प्रत्येक उत्तर मुझे ऑनलाइन मिल सकता है, इसके लिए पूरी तरह से jQuery पर निर्भर है। JQuery बहुत कम कार्यक्षमता जोड़ता है। यहां एक त्वरित संस्करण है जिसे किसी भी ढांचे की आवश्यकता नहीं है:

function allow_group_select_checkboxes(checkbox_wrapper_id){
    var lastChecked = null;
    var checkboxes = document.querySelectorAll('#'+checkbox_wrapper_id+' input[type="checkbox"]');

    //I'm attaching an index attribute because it's easy, but you could do this other ways...
    for (var i=0;i<checkboxes.length;i++){
        checkboxes[i].setAttribute('data-index',i);
    }

    for (var i=0;i<checkboxes.length;i++){
        checkboxes[i].addEventListener("click",function(e){

            if(lastChecked && e.shiftKey) {
                var i = parseInt(lastChecked.getAttribute('data-index'));
                var j = parseInt(this.getAttribute('data-index'));
                var check_or_uncheck = this.checked;

                var low = i; var high=j;
                if (i>j){
                    var low = j; var high=i; 
                }

                for(var c=0;c<checkboxes.length;c++){
                    if (low <= c && c <=high){
                        checkboxes[c].checked = check_or_uncheck;
                    }   
                }
            } 
            lastChecked = this;
        });
    }
}

और जब भी आपको इसकी आवश्यकता हो, तब इसे आरंभ करें:

allow_group_select_checkboxes('[id of a wrapper that contains the checkboxes]')
— झुकना
स्रोत
3

Http://abcoder.com/javascript/jquery/simple-check-uncheck-all-jquery-function/ (अब मृत) से यह समाधान प्राप्त करें :

जावास्क्रिप्ट और HTML कोड

var NUM_BOXES = 10;

// last checkbox the user clicked
var last = -1;

function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  if (!event) { event = window.event }
  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
     var di = num > last ? 1 : -1;
     for (var i = last; i != num; i += di) {
        document.forms.boxes['box[' + i + ']'].checked = true;
     }
  }
  last = num;
}

function init() {
  for (var i = 0; i < NUM_BOXES; i++) {
    document.forms.boxes['box[' + i + ']'].onclick = check;
  }
}
<body onload="init()">
    <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
    </form>
</body>
स्निपेट का विस्तार करें

— अदनान
स्रोत
लिंक डोमेन अब उपयोग में नहीं है।
— जेरेन वेंक्लाव
2

प्रदान किए गए ठीक जवाबों से प्रेरित होकर, यहां लूप्स के Array.prototypeबजाय सरणी फ़ंक्शन का उपयोग करने के लिए सहकर्मी नोडेलिस्ट का उपयोग करके एक सादे जावास्क्रिप्ट संस्करण है for।

(function () { // encapsulating variables with IIFE
  var lastcheck = null // no checkboxes clicked yet

  // get desired checkboxes
  var checkboxes = document.querySelectorAll('div.itemslist input[type=checkbox]')

  // loop over checkboxes to add event listener
  Array.prototype.forEach.call(checkboxes, function (cbx, idx) {
    cbx.addEventListener('click', function (evt) {

      // test for shift key, not first checkbox, and not same checkbox
      if ( evt.shiftKey && null !== lastcheck && idx !== lastcheck ) {

        // get range of checks between last-checkbox and shift-checkbox
        // Math.min/max does our sorting for us
        Array.prototype.slice.call(checkboxes, Math.min(lastcheck, idx), Math.max(lastcheck, idx))
          // and loop over each
          .forEach(function (ccbx) {
            ccbx.checked = true
        })
      }
      lastcheck = idx // set this checkbox as last-checked for later
    })
  })
}())
<div class="itemslist">
  <input type="checkbox" name="one"   value="1">
  <input type="checkbox" name="two"   value="2">
  <input type="checkbox" name="three" value="3">
  <input type="checkbox" name="four"  value="4">
  <input type="checkbox" name="five"  value="5">
</div>
स्निपेट का विस्तार करें

— bloodyKnuckles
स्रोत
डिसेलेक्ट फ़ंक्शन के साथ सुधार कैसे करें?
— RSH
2

मुझे वास्तव में gyo का उदाहरण पसंद आया और उसने कुछ कोड जोड़े ताकि यह एक ही नाम के साथ सभी चेकबॉक्स पर काम करे।

मैंने एक MutationObserver भी जोड़ा है ताकि नए जोड़े गए चेकबॉक्स पर भी घटनाओं को नियंत्रित किया जा सके।

$(document).ready(function() {
    var previouslyClicked = {};

    var rangeEventHandler = function(event) {
        if (event.shiftKey && previouslyClicked[this.name] && this != previouslyClicked[this.name]) {
            var $checkboxes = $('input[type=checkbox][name='+this.name+']').filter(':visible');
            var start = $checkboxes.index( this );
            var end = $checkboxes.index( previouslyClicked[this.name] );
//              console.log('range', start, end, this, previouslyClicked[this.name]);
            $checkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).prop('checked', previouslyClicked[this.name].checked);
        } else {
            previouslyClicked[this.name] = this;
        }
    };

    if ("MutationObserver" in window) { // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver to refresh on new checkboxes
        var mutationCallback = function(mutationList, observer) {
            mutationList.forEach((mutation) => {
                mutation.addedNodes.forEach((node) => {
                    if (node.nodeName == 'INPUT' && node.type == 'checkbox') {
                        $(node).on('click.selectRange', rangeEventHandler);
                    }
                });
            });
        };

        var observer = new MutationObserver(mutationCallback);
        observer.observe(document, {
            childList: true,
            attributes: false,  // since name is dynamically read
            subtree: true
        });
    }

    $('input[type=checkbox][name]').on('click.selectRange', rangeEventHandler);
});
<html>
<head>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div>
    First:
    <input type="checkbox" name="first">
    <input type="checkbox" name="first">
    <input type="checkbox" name="first">
    <input type="checkbox" name="first">
    <input type="checkbox" name="first">
  </div>
  <div>
    Second:
    <input type="checkbox" name="second">
    <input type="checkbox" name="second">
    <input type="checkbox" name="second">
    <input type="checkbox" name="second">
    <input type="checkbox" name="second">
  </div>
</body>
</html>
स्निपेट का विस्तार करें

— गेर्बन वर्स्लिस
स्रोत
1

मैंने @BC से jQuery संस्करण लिया। और यह एक ES6 संस्करण में तब्दील हो गया, क्योंकि कोड वास्तव में बहुत ही सुरुचिपूर्ण ढंग से समस्या को हल कर रहा है, मामले में किसी को अभी भी भर में ठोकर खाई है ... 

function enableGroupSelection( selector ) {
  let lastChecked = null;
  const checkboxes = Array.from( document.querySelectorAll( selector ) );

  checkboxes.forEach( checkbox => checkbox.addEventListener( 'click', event => {
    if ( !lastChecked ) {
      lastChecked = checkbox;

      return;
    }

    if ( event.shiftKey ) {
      const start = checkboxes.indexOf( checkbox );
      const end   = checkboxes.indexOf( lastChecked );

      checkboxes
        .slice( Math.min( start, end ), Math.max( start, end ) + 1 )
        .forEach( checkbox => checkbox.checked = lastChecked.checked );
    }

    lastChecked = checkbox;
  } ) );
}
— मोरिट्ज़ फ्रेडरिक
स्रोत
1

  • बेहतर समाधान मिला जो चुनिंदा और डिसप्ले चेकबॉक्स दोनों के लिए काम करता है।

  • एक कोर जावास्क्रिप्ट और Jquery का उपयोग करता है।

$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var lastChecked = null;

    $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', e.target.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>
स्निपेट का विस्तार करें

— योगेश कपडने
स्रोत
0

यहां आउटलुक के कई चयन के समान एक और कार्यान्वयन भी है।

    <script type="text/javascript">

function inRange(x, range)
{
    return (x >= range[0] && x <= range[1]);
}

$(document).ready(function() {
    var $chkboxes = $('.chkbox');
    var firstClick = 1;
    var lastClick = null;
    var range = [];

    $chkboxes.click(function(e) {
        if(!e.shiftKey && !e.ctrlKey) {

            $('#index-' + firstClick).prop('checked', false);

            firstClick = $chkboxes.index(this) + 1;

            if (firstClick !== null && firstClick !== ($chkboxes.index(this)+1)) {
                $('#index-' + firstClick).prop('checked', true);
            }
        } else if (e.shiftKey) {
            lastClick = $chkboxes.index(this) + 1;
            if ((firstClick < lastClick) && !inRange(lastClick, range)) {
                for (i = firstClick; i < lastClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [firstClick, lastClick];
            } else if ((firstClick > lastClick) && !inRange(lastClick, range)) {
                for (i = lastClick; i < firstClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [lastClick, firstClick];
            } else if ((firstClick < lastClick) && inRange(lastClick, range)) {
                for (i = 1; i < 100; i++) {
                    $('#index-' + i).prop('checked', false);
                }

                for (i = firstClick; i < lastClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [firstClick, lastClick];
            }else if ((firstClick > lastClick) && inRange(lastClick, range)) {
                for (i = 1; i < 100; i++) {
                    $('#index-' + i).prop('checked', false);
                }

                for (i = lastClick; i < firstClick; i++) {
                    $('#index-' + i).prop('checked', true);
                }
                range = [lastClick, firstClick];
            }
        }
    });
});

— vasgen
स्रोत
0

यह jquery समाधान है जो मैंने लिखा और उपयोग किया है:

  • सभी चेकबॉक्स में एक ही वर्ग का नाम है chksel
  • तेजी से व्यक्तिगत चयन के लिए एक वर्ग नाम के आदेश को आगे बढ़ाएगा chksel_index

  • इसके अलावा प्रत्येक checkboxमें एक विशेषता होती है जिसका नाम एक rgही सूचकांक होता है

    var chksel_last=-1;
$('.chksel').click(function(ev){
   if(ev.shiftKey){var i=0;
      if(chksel_last >=0){
        if($(this).attr('rg') >= chksel_last){
         for(i=chksel_last;i<=$(this).attr('rg');i++){$('.chksel_'+i).attr('checked','true')}}
        if($(this).attr('rg') <= chksel_last){for(i=$(this).attr('rg');i<=chksel_last;i++){$('.chksel_'+i).attr('checked','true')}}
      }  
      chksel_last=$(this).attr('rg');
   }else{chksel_last=$(this).attr('rg');}

    })

— सज्जन
स्रोत
0

यह समाधान मेरे लिए काम करता है, DataTables के लिए भी ajax आधारित है https://jsfiddle.net/6ouhv7bw/4/

<table id="dataTable">

<tbody>
<tr>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
</tr>

<tr>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>

<script>
$(document).ready(function() {
   var $chkboxes = $('#dataTable');
var $range = '#dataTable tbody';
var $first = false;
var $indexWrapp = 'tr';
var lastChecked = null;
var $checkboxes = 'input[type="checkbox"]';

$chkboxes.on('click',$checkboxes,function(e) {

    if ($first===false) {

        lastChecked = $(this).closest($indexWrapp).index();
        lastCheckedInput = $(this).prop('checked');
        $first=true;
        return;
    }

    if (e.shiftKey) {

        var start = lastChecked;
        var end =  $(this).closest($indexWrapp).index();

       $( $range+' '+$indexWrapp).each(function() {
          $currIndex=$(this).index();
          if( $currIndex>=start && $currIndex<=end ){
              $(this).find($checkboxes).prop('checked', lastCheckedInput);
          }

       })
    }

     lastCheckedInput = $(this).prop('checked');
     lastChecked = $(this).closest($indexWrapp).index();
});
</script>
— dazzafact
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.