Maison > Article > interface Web > Utilisation de la case à cocher dans jQuery

Utilisation de la case à cocher dans jQuery

php中世界最好的语言original: 2018-03-15 17:57:151364parcourir

Cette fois, je vais vous présenter l'utilisation de la case à cocher dans jQuery Quelles sont les précautions lors de l'utilisation de la case à cocher dans jQuery. Voici un cas pratique, jetons un coup d'œil.

Cet article présente principalement le fonctionnement simple de jQuery pour implémenter la case à cocher. Il a une certaine valeur de référence pour le groupe case à cocher pour sélectionner tous, tous les amis non sélectionnés et tous les amis sélectionnés. reportez-vous à

pour tout sélectionner, tout désélectionner ou ne pas sélectionner tout le groupe de cases à cocher, et pour obtenir la valeur de la case à cocher sélectionnée

1 Cliquez pour tout sélectionner. bouton , cochez tous les groupes de cases ou annulez tout.
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 :

L'API que jQuery doit maîtriser

Comment implémenter le téléchargement de fichiers avec animation de barre de progression

Comment jquery obtient la valeur de transform

Utilisez JQUERY pour implémenter plusieurs requêtes AJAX en attendant

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：Explication détaillée des exemples de dictionnaire js et de table de hachageArticle suivant：Explication détaillée des exemples de dictionnaire js et de table de hachage

Articles Liés

Voir plus