Code-Sharing zum Implementieren dynamischer Kontrollkästchen in Tabellen mithilfe von JQuery-js-Tutorial-php.cn

Code-Sharing zum Implementieren dynamischer Kontrollkästchen in Tabellen mithilfe von JQuery

零到壹度

Freigeben： 2018-04-09 16:58:44

Original

1590 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, den Code von jquery zu teilen, um das dynamische Kontrollkästchen der Tabelle zu realisieren. Es hat einen bestimmten Referenzwert.

Der Effekt ist wie folgt Bild
Code-Sharing zum Implementieren dynamischer Kontrollkästchen in Tabellen mithilfe von 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>

Nach dem Login kopieren

Den entsprechenden Wert dynamisch überprüfen

JQuery Operation Checkbox Checkbox Skill Zusammenfassung

Das obige ist der detaillierte Inhalt vonCode-Sharing zum Implementieren dynamischer Kontrollkästchen in Tabellen mithilfe von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!