suchen

Heim >Web-Frontend >js-Tutorial >Code-Sharing zum Implementieren dynamischer Kontrollkästchen in Tabellen mithilfe von JQuery

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

零到壹度
零到壹度Original
2018-04-09 16:58:441626Durchsuche

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>

                                                                                                                      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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie Unittest+Coverage die Unit-Test-Abdeckung durchführtNächster Artikel：Wie Unittest+Coverage die Unit-Test-Abdeckung durchführt

In Verbindung stehende Artikel

Mehr sehen