jQuery implémente une opération simple de case à cocher-js tutoriel-php.cn

jQuery implémente une opération simple de case à cocher

韦小宝

Libérer： 2018-01-16 11:11:38

original

1020 Les gens l'ont consulté

Cet article présente principalement le fonctionnement simple de jQuery pour implémenter la case à cocher, et il fournit certaines références et apprentissages pour tout sélectionner, tout désélectionner et ne pas sélectionner tout le groupe case à cocher . La valeur de jquery. Les amis intéressés par jquery peuvent se référer à cet article

Comment tout sélectionner, tout désélectionner et ne pas sélectionner tout un groupe de cases à cocher, et obtenir la valeur de la case à cocher sélectionnée.

1. Cliquez sur le bouton Sélectionner tout pour sélectionner toutes les cases ou les annuler toutes.
2. Réalisez le lien entre le bouton Sélectionner tout et le groupe de cases à cocher. Lorsque l'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 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是错的
      */
      $(&#39;#checkedAll&#39;).click(function() {
        $(&#39;[name=item]:checkbox&#39;).prop(&#39;checked&#39;, this.checked);
      });

      /*判断复选框的总数，是否和选中的复选框的数量相等
      相等：全选了
      不相等：没有全选
      */
      $(&#39;[name=item]:checkbox&#39;).click(function() {
        /*得到的是ul下 name=item 的复选框数组*/
        var $checkedArray = $(&#39;[name=item]:checkbox&#39;);
        /*$checkedArray.filter(&#39;:checked&#39;) -----> 已经选择的复选框 */
        $(&#39;#checkedAll&#39;).prop(&#39;checked&#39;,$checkedArray.length==$checkedArray.filter(&#39;:checked&#39;).length);
　　　　　　　　　　　　
      });
    });
  </script>
  <script type="text/javascript">
    $(function () {
      //获取已选的复选框的值
      var checkedArray = new Array();//放已经选择的checkbox的value
      var count;//已经选择的个数
      $(&#39;#btn_submit&#39;).click(function() {
        checkedArray.length=0;
        count=0;
        $(&#39;[name=item]:checkbox:checked&#39;).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>

Copier après la connexion

En ce qui concerne les lacunes du code, celles qui ne sont pas assez concises peuvent être optimisées davantage. Si vous avez de meilleures idées et méthodes de mise en œuvre, veuillez. n'hésitez pas à les partager avec nous.

Recommandations associées :

javascript détermine si l'utilisateur a exploité la page

Explication détaillée de plusieurs exemples d'héritage à l'aide de JavaScript

JavaScript implémente une analyse de tri rapide

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!