English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. Posizione attuale
  2. Pagina principale
  3. Note di esperienza
  4. Testo principale

Implementazione di checkbox per selezione completa/nessuna selezione/selezione singola/selezione inline (Mr.Think) in versione nativa JS e jQuery

Nel progetto quotidiano, per gli articoli o i dati elencati, è abbastanza comune utilizzare la funzione di selezione a casella di controllo di selezione o deselezione totale. In progetti precedenti, ho scritto anche script di selezione a casella di controllo, ma non li ho mai organizzati. Proprio qualche giorno fa, un collega ha incontrato questo problema, fortunatamente, ho dedicato un po' di tempo a scrivere due versioni, una in JavaScript nativo e l'altra in jQuery, tenendo conto della flessibilità dell'uso, non li ho encapsulati, quindi chi ne ha bisogno deve modificare i relativi parametri da soli.

Vai a vedere la presentazione delle funzioniDimostrazione DEMO

1. Implementazione unitaria del checkbox "Selezione/Deselezione totale", ovvero lo stato del checkbox nella lista è lo stesso dello stato del checkbox davanti al checkbox "Selezione/Deselezione totale";
2. Cambia automaticamente lo stato del checkbox "Selezione/Deselezione totale", ovvero quando tutti i checkbox nella lista sono selezionati, il checkbox "Selezione/Deselezione totale" è anche selezionato, e viceversa;
3. Cliccando sulle righe della lista è possibile selezionare il checkbox all'interno della riga e联动1,2 funzioni.
Inoltre, questo articolo si concentra sulla scrittura della selezione in massa, lo sfondo变色 quando il mouse si muove è una semplice implementazione, per una versione più perfetta fare riferimento a:

https://it.oldtoolbag.com/article/24125.htm

Codice nucleare versione JavaScript nativo

Codice HTML

<form id="js" name="js" action="#">
		<h5>Esempio JavaScript nativo</h5>
		<dl>
			<dt><label for="js_chk_0"><input type="checkbox" id="js_chk_0" name="chk_can" value="" />Selezione/Deselezione totale</label></dt>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Implementazione nativa di selezione e deselezione in massa, anche cliccando sulla riga può essere selezionata o deselezionata</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Implementazione nativa di selezione e deselezione in massa, anche cliccando sulla riga può essere selezionata o deselezionata</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Implementazione nativa di selezione e deselezione in massa, anche cliccando sulla riga può essere selezionata o deselezionata</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Implementazione nativa di selezione e deselezione in massa, anche cliccando sulla riga può essere selezionata o deselezionata</dd>
			<dd><span>2010-12-12</span><input type="checkbox" name="jsitems" value="" />Implementazione nativa di selezione e deselezione in massa, anche cliccando sulla riga può essere selezionata o deselezionata</dd>
			<dt><label for="js_chk_1"><input type="checkbox" id="js_chk_1" name="chk_can" value="" />Selezione/Deselezione totale</label></dt>
		</dl>
	</form>

Codice JavaScript nativo

//Implementazione nativa di selezione e deselezione in massa
window.onload = function iCheckAll() {
 var js_chk = document.forms['js'].chk_can;
 var jsitems = document.forms['js'].jsitems;
 var jsrows = document.getElementById('js').getElementsByTagName('dd');
 //Determina lo stato di selezione completa o non completa in base al numero di caselle selezionate e al numero totale di caselle
 var chk_canle = function(){
  var checkedLen = 0;
		//Calcola il numero di caselle di selezione selezionate nella lista
  for (var m = 0; m < jsitems.length; m++) {
   if (jsitems[m].checked) {
    checkedLen += 1;
   }
  }
		//Determina se il numero di selezionati è uguale al numero totale, per determinare lo stato di selezione completa/nessuna selezione
  for (var m = 0; m < js_chk.length; m++) {
   js_chk[m].checked = (jsitems.length == checkedLen);
  }
 }
	//全选与全不选一体实现
 for (var i = 0; i < js_chk.length; i++) {
  js_chk[i].onclick = function(){
			//Stabilisci uno stato uniforme tra la casella di selezione nella lista e la casella di selezione di scelta multipla
   for (var m = 0; m < jsitems.length; m++) {
    jsitems[m].checked = this.checked;
   }
			//Stabilisci uno stato uniforme per la casella di selezione di scelta multipla
   for (var m = 0; m < js_chk.length; m++) {
    js_chk[m].checked = this.checked;
   }
  }
 }
	//Click casella di selezione nella lista
 for (var i = 0; i < jsitems.length; i++) {
  jsitems[i].onclick = function(e){
			//阻止冒泡,避免行点击事件中,直接选择选框无效
   e && e.stopPropagation ? e.stopPropagation() : window.event.cancelBubble=true;
   chk_canle();
  }
 }
 //Click interno riga
 for (var i = 0; i < jsrows.length; i++) {
  jsrows[i].onclick = function(){
			//Al clic del pulsante, lo stato del checkbox all'interno della riga viene invertito
   this.getElementsByTagName('input')[0].checked = !this.getElementsByTagName('input')[0].checked;
   chk_canle();
  }
		//Inserisci il riferimento http://mrthink.net/javascript-tagnames-highlight/
  jsrows[i].onmouseover = function(){
   this.className = 'hover';
  }
  jsrows[i].onmouseout = function(){
   this.className = '';
  }
 }
}

Codice nucleare della versione jQuery

Codice HTML

<form id="jq" name="jq" action="#">
		<h5>Esempio jQuery</h5>
		<dl>
			<dt><label for="jq_chk_0"><input type="checkbox" id="jq_chk_0" name="chk_can" value="" />Tutti selezionati/Nessuno selezionato</label></dt>
			<dd><span>12-12-2010</span><input type="checkbox" name="jqitems" value="" />Tutti selezionati/Nessuno selezionato basato su jQuery, è possibile selezionare o deselezionare anche facendo clic sulla riga</dd>
			<dd><span>12-12-2010</span><input type="checkbox" name="jqitems" value="" />Tutti selezionati/Nessuno selezionato basato su jQuery, è possibile selezionare o deselezionare anche facendo clic sulla riga</dd>
			<dd><span>12-12-2010</span><input type="checkbox" name="jqitems" value="" />Tutti selezionati/Nessuno selezionato basato su jQuery, è possibile selezionare o deselezionare anche facendo clic sulla riga</dd>
			<dd><span>12-12-2010</span><input type="checkbox" name="jqitems" value="" />Tutti selezionati/Nessuno selezionato basato su jQuery, è possibile selezionare o deselezionare anche facendo clic sulla riga</dd>
			<dd><span>12-12-2010</span><input type="checkbox" name="jqitems" value="" />Tutti selezionati/Nessuno selezionato basato su jQuery, è possibile selezionare o deselezionare anche facendo clic sulla riga</dd>
			<dt><label for="jq_chk_1"><input type="checkbox" id="jq_chk_1" name="chk_can" value="" />Tutti selezionati/Nessuno selezionato</label></dt>
		</dl>
	</form>

jquery核心实现代码

//jQ实现全选全不选
$(function(){
 var _jq_chk = $('#jq>dl>dt>label>:checkbox');
 var _jqitems = $(':checkbox[name=jqitems]');
 var _rows = $('#jq>dl>dd');
 //全选与全不选一体实现
 _jq_chk.click(function(){
		//列表中选框和全选选框统一状态
  _jqitems.add(_jq_chk).attr('checked', this.checked);
 });
 //选框的点击事件
 _jqitems.click(function(e){
  //阻止冒泡,避免行点击事件中,直接选择选框无效
  e.stopPropagation();
		//Determina se il numero di selezionati è uguale al numero totale, per determinare lo stato di selezione completa/nessuna selezione
  _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
 });
 //点选行时选中行内的checkbox
 _rows.bind({
  mouseenter: function(){
   $(this).addClass('hover');
  
  mouseleave: function(){
   $(this).removeClass('hover');
  
		//Seleziona
  click: function(){
			//Al clic del pulsante, lo stato del checkbox all'interno della riga viene invertito
   $(this).find(':checkbox').attr('checked', !$(this).find(':checkbox').get(0).checked)
			//Determina se il numero di selezionati è uguale al numero totale, per determinare lo stato di selezione completa/nessuna selezione
   _jq_chk.attr('checked', _jqitems.size() == _jqitems.filter(':checked').size());
  }
 });
});

Questo codice è molto più lungo rispetto all'implementazione standard, principalmente perché è possibile selezionare una riga facendo clic su di essa. Più funzioni, più codice. Puoi tagliare e incollare a tuo piacimento in base alle tue esigenze.

Molti sviluppatori web incontrano problemi JS, quindi usare JQ o JS, spesso ci fa sentire confusi, ma in realtà JS è universale, mentre JQ è costruito su un pacchetto di librerie JQ caricate, quindi l'implementazione è assolutamente identica.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright è della proprietà del rispettivo proprietario, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, il sito web non detiene il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito web eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Guida di base
Ti potrebbe interessare