suchen

Heim >Web-Frontend >js-Tutorial >jquery implementiert einfache vollständige Auswahl- und inverse Auswahlfunktionen_jquery

jquery implementiert einfache vollständige Auswahl- und inverse Auswahlfunktionen_jquery

WBOY
WBOYOriginal
2016-05-16 15:22:24994Durchsuche

Schauen wir uns zunächst ein einfaches Beispiel an

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery实现CheckBox全选、全不选</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>  <script type="text/javascript">
    $(function() {
      $("#checkAll").click(function() {
        $('input[name="subBox"]').attr("checked",this.checked); 
      });
      var $subBox = $("input[name='subBox']");
      $subBox.click(function(){
        $("#checkAll").attr("checked",$subBox.length == $("input[name='subBox']:checked").length &#63; true : false);
      });
    });
  </script>
 
</head>
<body>
  <div>
    <input id="checkAll" type="checkbox" />全选
    <input name="subBox" type="checkbox" />项1
    <input name="subBox" type="checkbox" />项2
    <input name="subBox" type="checkbox" />项3
    <input name="subBox" type="checkbox" />项4
  </div>
</body>
</html>

Lassen Sie mich einen auf jQuery basierenden Code zur Implementierung der Funktionen zum Auswählen aller, Invertieren und Abwählen der Kontrollkästchenliste mit Ihnen teilen. Er eignet sich für Szenarien, in denen nach mehreren Auswahlen auf einer Webseite Stapelvorgänge erforderlich sind (z. B Stapellöschung usw.). Der Artikel kombiniert Beispiele mit prägnantem Code und deckt grundsätzlich alle Aspekte der Optionsauswahl ab. Ich hoffe, er kann Front-End-Entwicklungsbegeisterten in Not helfen.

Einführung in die JQuery-Bibliothek

<script src="http://ajax.useso.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

HTML erstellen

Im Allgemeinen müssen aus der Datenbank gelesene Listen stapelweise zum Löschen und Bearbeiten ausgewählt werden. Lassen Sie uns unten simulieren, ob alle Kontrollkästchen aktiviert werden sollen oder nicht.

<ul id="list">  
  <li><label><input type="checkbox" value="1"> 1.我是记录来的呢</label></li> 
  <li><label><input type="checkbox" value="2"> 2.哈哈，真的太天真了</label></li> 
  <li><label><input type="checkbox" value="3"> 3.爱上你是我的错吗？</label></li> 
  <li><label><input type="checkbox" value="4"> 4.从开始你就不应用爱上我</label></li> 
  <li><label><input type="checkbox" value="5"> 5.喜欢一个人好难</label></li> 
  <li><label><input type="checkbox" value="6"> 6.你在那里呢</label></li> 
</ul> 
<input type="checkbox" id="all"> 
<input type="button" value="全选" class="btn" id="selectAll">  
<input type="button" value="全不选" class="btn" id="unSelect">  
<input type="button" value="反选" class="btn" id="reverse">  
<input type="button" value="获得选中的所有值" class="btn" id="getValue">

jQuery-Code

1. Wählen Sie „Alle“ oder „Keine“ aus. Wenn das Kontrollkästchen #all neben der Schaltfläche „Alle auswählen“ aktiviert ist, werden alle Optionen in der Liste ausgewählt. Andernfalls sind alle Optionen in der Liste deaktiviert. 

$("#all").click(function(){  
  if(this.checked){  
    $("#list :checkbox").attr("checked", true);  
  }else{  
    $("#list :checkbox").attr("checked", false); 
  }  
});

2. Alles auswählen. Wenn Sie auf die Schaltfläche „Alle auswählen“ #selectAll klicken oder das Kontrollkästchen #all neben der Schaltfläche „Alle auswählen“ aktivieren, werden alle Optionen in der Liste ausgewählt, einschließlich des Kontrollkästchens neben „Alle auswählen“. 

$("#selectAll").click(function () { 
  $("#list :checkbox,#all").attr("checked", true);  
});

3. Wählen Sie „Keine“ aus. Wenn auf die Schaltfläche #unSelect geklickt wird, werden alle Optionen in der Liste deaktiviert, einschließlich #all. 

$("#unSelect").click(function () {  
  $("#list :checkbox,#all").attr("checked", false);  
});

4. Zählerauswahl. Wenn Sie auf die Schaltfläche #Umkehren klicken, werden alle ausgewählten Optionen in der Liste deaktiviert und alle nicht ausgewählten Optionen werden ausgewählt. Natürlich sollten Sie auch auf den Status von #alle achten. 

$("#reverse").click(function () { 
  $("#list :checkbox").each(function () {  
    $(this).attr("checked", !$(this).attr("checked"));  
  }); 
  allchk(); 
});

Der Code durchläuft die Optionsliste, ändert dann das geprüfte Attribut und ruft schließlich die Funktion allchk() auf, die später vorgestellt wird.

5. Alle ausgewählten Werte abrufen. Wenn wir mit dem Hintergrundprogramm interagieren möchten, müssen wir den Wert des ausgewählten Elements in der Liste abrufen. Wir durchlaufen das Array, speichern den Wert des ausgewählten Elements im Array und bilden schließlich eine durch Kommas (,) getrennte Zeichenfolge. . Entwickler können die entsprechende Operation für diese Zeichenfolge ausführen. 

$("#getValue").click(function(){ 
  var valArr = new Array; 
  $("#list :checkbox[checked]").each(function(i){ 
    valArr[i] = $(this).val(); 
  }); 
  var vals = valArr.join(',');//转换为逗号隔开的字符串 
  alert(vals); 
});

Um die Funktion der ausgewählten Optionen zu verbessern, wird #all entsprechend ausgewählt, wenn wir auf eine Option in der Liste klicken, wenn alle ausgewählten Elemente ausgewählt sind im Voraus: Wenn eine Option ausgewählt und deaktiviert ist, wird auch #all entsprechend deaktiviert. 

//设置全选复选框 
$("#list :checkbox").click(function(){ 
  allchk(); 
});

Die Funktion allchk() wird verwendet, um zu erkennen, ob das All-Select-Feld #all ausgewählt oder nicht ausgewählt werden soll. Bitte beachten Sie den Code. 

function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

Zusammenfassung

jQuery verwaltet den aktivierten und nicht aktivierten Status des Kontrollkästchens sehr einfach. Verwenden Sie attr(), um den Wert des Attributs „aktiviert“ festzulegen, und achten Sie darauf, alle Auswahlen und umgekehrten Auswahlen zu behandeln den gesamten Prozess. Wählen Sie den aktivierten Status des Kontrollkästchens aus und erhalten Sie den Wert der ausgewählten Option. Nachfolgend habe ich den gesamten jQuery-Code als Referenz zusammengestellt. 

$(function () { 
  //全选或全不选 
  $("#all").click(function(){  
    if(this.checked){  
      $("#list :checkbox").attr("checked", true);  
    }else{  
      $("#list :checkbox").attr("checked", false); 
    }  
   }); 
  //全选  
  $("#selectAll").click(function () { 
     $("#list :checkbox,#all").attr("checked", true);  
  });  
  //全不选 
  $("#unSelect").click(function () {  
     $("#list :checkbox,#all").attr("checked", false);  
  });  
  //反选 
  $("#reverse").click(function () { 
     $("#list :checkbox").each(function () {  
       $(this).attr("checked", !$(this).attr("checked"));  
     }); 
     allchk(); 
  }); 
   
  //设置全选复选框 
  $("#list :checkbox").click(function(){ 
    allchk(); 
  }); 
  
  //获取选中选项的值 
  $("#getValue").click(function(){ 
    var valArr = new Array; 
    $("#list :checkbox[checked]").each(function(i){ 
      valArr[i] = $(this).val(); 
    }); 
    var vals = valArr.join(','); 
     alert(vals); 
  }); 
}); 
function allchk(){ 
  var chknum = $("#list :checkbox").size();//选项总个数 
  var chk = 0; 
  $("#list :checkbox").each(function () {  
    if($(this).attr("checked")==true){ 
      chk++; 
    } 
  }); 
  if(chknum==chk){//全选 
    $("#all").attr("checked",true); 
  }else{//不全选 
    $("#all").attr("checked",false); 
  } 
}

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript implementiert Eingabedatei-Upload-Bildvorschau-Effekt_Javascript-FähigkeitenNächster Artikel：Javascript implementiert Eingabedatei-Upload-Bildvorschau-Effekt_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen