recherche

Maison  >  Article  >  interface Web  >  Explication détaillée des étapes de la case à cocher de l'opération jQuery

Explication détaillée des étapes de la case à cocher de l'opération jQuery

php中世界最好的语言
php中世界最好的语言original
2018-04-19 14:11:151376parcourir

Cette fois, je vais vous apporter une explication détaillée des étapes à suivre pour faire fonctionner la case à cocher avec jQuery, et quelles sont les précautions pour faire fonctionner la case à cocher avec jQuery. Voici un cas pratique, jetons un coup d'oeil.

Sélectionnez tout, désélectionnez tout et désélectionnez tout du groupe case à cocher , et obtenez la valeur de la case à cocher sélectionnée

1. Cliquez sur le bouton Sélectionner tout pour cocher ou annuler toutes les cases du groupe.
2. Réalisez le lien entre le bouton Sélectionner tout et le groupe de cases à cocher. Lorsqu'un des groupes de cases à cocher n'est pas sélectionné, le bouton Sélectionner tout avec id='checkedAll' doit être décoché lorsque le groupe de cases à cocher est une fois ; tous sont sélectionnés, le bouton Sélectionner tout doit également être sélectionné.
3. Obtenez la valeur de la case à cocher sélectionnée.

Code : 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对复选框组的全选操作</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
      /*全选
      全选cheched和下方的checkbox按钮的checked是一致的，
      故可用this.checked。
      注意：$(this).checked是错的
      */
      $('#checkedAll').click(function() {
        $('[name=item]:checkbox').prop('checked', this.checked);
      });
      /*判断复选框的总数，是否和选中的复选框的数量相等
      相等：全选了
      不相等：没有全选
      */
      $('[name=item]:checkbox').click(function() {
        /*得到的是ul下 name=item 的复选框数组*/
        var $checkedArray = $('[name=item]:checkbox');
        /*$checkedArray.filter(':checked') -----> 已经选择的复选框 */
        $('#checkedAll').prop('checked',$checkedArray.length==$checkedArray.filter(':checked').length);
            
      });
    });
  </script>
  <script type="text/javascript">
    $(function () {
      //获取已选的复选框的值
      var checkedArray = new Array();//放已经选择的checkbox的value
      var count;//已经选择的个数
      $('#btn_submit').click(function() {
        checkedArray.length=0;
        count=0;
        $('[name=item]:checkbox:checked').each(function() {
          checkedArray.push($(this).val());
          count++;
        });
        if (checkedArray.length==0) {
          alert("Please check one at least.");
          return;
        }
        confirm("已选复选框的值："+checkedArray+"\n"+"选中的复选框个数："+count);
      });
    })
  </script>
</head>
<body>
  <form action="#" method="POST">
    <input type="checkbox" id="checkedAll"><label for="checkedAll">全选</label>
    <ul>
      <li><input type="checkbox" name="item" value="basketball">篮球</li>
      <li><input type="checkbox" name="item" value="football">足球</li>
      <li><input type="checkbox" name="item" value="badminton">羽毛球</li>
      <li><input type="checkbox" name="item" value="pingpong">兵乓球</li>
      <li><input type="checkbox" name="item" value="swimming">游泳</li>
      <li><input type="checkbox" name="item" value="running">跑步</li>
    </ul>
    <button type="button" id="btn_submit" value="提交button">提交</button>
  </form>
</body>
</html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment configurer Webpack avec jquery

jQuery zTree ajoute à plusieurs reprises des nœuds enfants au cours d'un processus asynchrone

Comment jQuery EasyUI exploite les onglets du panneau d'onglets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：jQuery zTree ajoute à plusieurs reprises des nœuds enfants pendant le processus asynchroneArticle suivant：jQuery zTree ajoute à plusieurs reprises des nœuds enfants pendant le processus asynchrone

Articles Liés

Voir plus