Maison > Article > interface Web > Partage de code pour implémenter des cases à cocher dynamiques dans les tableaux à l'aide de jquery

Partage de code pour implémenter des cases à cocher dynamiques dans les tableaux à l'aide de jquery

零到壹度original: 2018-04-09 16:58:441574parcourir

Le contenu de cet article est de partager le code de jquery pour réaliser la case à cocher dynamique du tableau. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

L'effet est le suivant Image

Partage de code pour implémenter des cases à cocher dynamiques dans les tableaux à laide de jquery

<!DOCTYPE html><html><head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- 引入JQuery  bootstrap.js-->
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script></head><body>
    <p class="container">
        <p class="col-md-7">
            <button id=&#39;addTypeBtn&#39; class="btn btn-default btn-danger">添加</button>
            <button class="btn btn-default">保存</button>
            <table  class="table">
                <thead>
                    <tr>
                        <th><input id=&#39;checkAll&#39; type="checkbox"/></th>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input type="text" placeholder="请输入姓名"  value="张三"/></td>
                        <td><input type="number" style="width: 40px" value="1"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" placeholder="请输入姓名"  value="张三"/></td>
                        <td><input type="number" style="width: 40px" value="1"/></td>
                    </tr>
                    <tr>
                        <td><input type="text" placeholder="请输入姓名"  value="张三"/></td>
                        <td><input type="number" style="width: 40px" value="1"/></td>
                    </tr>
                </tbody>
            </table>
        </p>
    </p></body><script>

    $(function(){

        //初始化
        function initTable() {
            var checkAll = $(&#39;#checkAll&#39;);            var trs = $(&#39;tbody tr&#39;);            var tag = $(&#39;<td><input name="checkitem" type="checkbox"/></td>&#39;);
            trs.prepend(tag);            //得到tbody中的所有选框.
            var checks = $(&#39;input[name="checkitem"]&#39;);            //给全选框添加事件
            checkAll.on(&#39;click&#39;,function(event){
                if($(this).prop(&#39;checked&#39;) == false){ //全部取消
                    $(&#39;input[type="checkbox"]&#39;).prop(&#39;checked&#39;,false);
                }else{
                    $(&#39;input[type="checkbox"]&#39;).prop(&#39;checked&#39;,true);
                }
            });            //给每个单独的选择框加事件
            $(&#39;tbody&#39;).on(&#39;click&#39;,function(event){
                checks = $(&#39;input[name="checkitem"]&#39;);                if (event.target.name == &#39;checkitem&#39;){                    if($(this).prop(&#39;checked&#39;) == false){
                    $(this).prop(&#39;checked&#39;,false);
                    }else{
                        $(this).prop(&#39;checked&#39;,true);
                    }                    //判断是否选满了
                    if(checks.length == $(&#39;tbody&#39;).find(&#39;input:checked&#39;).length){
                        checkAll.prop(&#39;checked&#39;,true);
                    }else{
                        checkAll.prop(&#39;checked&#39;,false);
                    }
                }
            });
        }

        initTable();        //新增点击事件
        $(&#39;#addTypeBtn&#39;).on(&#39;click&#39;, function () {
            var html = &#39;&#39;;
            html += &#39;<tr class="active">&#39;;
            html += &#39;<td><input name="checkitem" type="checkbox"/></td>&#39;
            html += &#39;<td><input type="text" placeholder="请输入姓名"  value="张三"/></td>&#39;;
            html += &#39;<td><input type="number" style="width: 40px" value="1"/></td>&#39;;
            html += &#39;<td>&#39;;
            html += &#39;</tr>&#39;;            var html = $(html)
            $(&#39;tbody&#39;).append(html);            //取消全选
            $(&#39;#checkAll&#39;).prop(&#39;checked&#39;,false);
        });
    });</script></html>

Cochez dynamiquement la valeur correspondante

Compétence de case à cocher de case à cocher d'opération JQuery résumé

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：Comment unittest+coverage effectue la couverture des tests unitairesArticle suivant：Comment unittest+coverage effectue la couverture des tests unitaires

Articles Liés

Voir plus