recherche

Maison >interface Web >js tutoriel >jquery implémente des fonctions simples de sélection complète et de sélection inverse_jquery

jquery implémente des fonctions simples de sélection complète et de sélection inverse_jquery

WBOY
WBOYoriginal
2016-05-16 15:22:24997parcourir

Regardons d'abord un exemple simple

<!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>

Permettez-moi de partager avec vous un morceau de code basé sur jQuery pour implémenter les fonctions de sélection de tout, d'inversion et de désélection de la liste des cases à cocher. Il convient aux scénarios où des opérations par lots sont nécessaires après plusieurs sélections sur une page Web (comme par exemple). suppression de lots, etc.). L'article combine des exemples avec un code concis et couvre essentiellement tous les aspects des opérations de sélection d'options. J'espère qu'il pourra aider les passionnés de développement front-end dans le besoin.

Présentation de la bibliothèque jquery

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

Construire du HTML

Généralement, les listes lues dans la base de données doivent être sélectionnées par lots pour être supprimées et modifiées. Simulons-le ci-dessous pour savoir s'il faut cocher ou non toutes les cases.

<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">

code jQuery

1. Sélectionnez tout ou rien. Lorsque la case #all à côté du bouton Sélectionner tout #selectAll est cochée, toutes les options de la liste sont sélectionnées. Sinon, lorsqu'elle n'est pas cochée, toutes les options de la liste sont décochées. 

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

2. Sélectionnez tout. Lorsque vous cliquez sur le bouton Sélectionner tout #selectAll ou cochez la case #all à côté du bouton Sélectionner tout, toutes les options de la liste seront sélectionnées, y compris la case à cocher en regard de Sélectionner tout. 

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

3. Sélectionnez aucun. Lorsque vous cliquez sur le bouton #unSelect, toutes les options de la liste sont désélectionnées, y compris #all. 

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

4. Sélection du compteur. Lorsque vous cliquez sur le bouton #reverse, toutes les options sélectionnées dans la liste deviennent désélectionnées et toutes les options non sélectionnées deviennent sélectionnées. Bien entendu, vous devez également faire attention à l'état de #all. 

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

Le code parcourt la liste d'options, puis modifie l'attribut vérifié et appelle enfin la fonction allchk(), qui sera introduite plus tard.

5. Obtenez toutes les valeurs sélectionnées. Si nous voulons interagir avec le programme en arrière-plan, nous devons obtenir la valeur de l'élément sélectionné dans la liste. Nous parcourons le tableau, stockons la valeur de l'élément sélectionné dans le tableau et formons enfin une chaîne séparée par des virgules (,) .Les développeurs peuvent obtenir L'opération correspondante est effectuée sur cette chaîne. 

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

Afin d'améliorer la fonction des options sélectionnées, lorsque nous cliquons sur une option dans la liste, si l'élément coché remplit toutes les conditions sélectionnées, #all sera également sélectionné en conséquence. De même, si tous les éléments sélectionnés sont sélectionnés. à l'avance, lorsqu'une option est sélectionnée et lorsqu'une option est décochée, #all deviendra également décoché en conséquence. 

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

La fonction allchk() est utilisée pour détecter si la case de sélection de tout #all doit être sélectionnée ou désélectionnée. Veuillez consulter le 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); 
  } 
}

Résumé

jQuery exploite le statut coché et non coché de la case à cocher très simplement. Utilisez attr() pour définir la valeur de l'attribut "checked". True est décoché, false est décoché. Faites attention à la gestion de toutes les sélections et sélections inverses. l'ensemble du processus. Sélectionnez l'état coché de la case et obtenez la valeur de l'option sélectionnée. Ci-dessous, j'ai compilé tout le code jQuery pour votre référence. 

$(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); 
  } 
}

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Javascript implémente les compétences de téléchargement d'image de téléchargement de fichier d'entrée effect_javascriptArticle suivant：Javascript implémente les compétences de téléchargement d'image de téléchargement de fichier d'entrée effect_javascript

Articles Liés

Voir plus