美文网首页前端
全选与反选

全选与反选

作者: leomei91 | 来源:发表于2017-06-19 17:48 被阅读0次

    代码:

    <div>
        <input type="button" value="添加主机" onclick="show();" />
        <input type="button" value="全选" onclick="all01();" />
        <input type="button" value="取消" onclick="cancel();" />
        <input type="button" value="反选" onclick="reverse();" />
        
        <table>
            <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
            </tr>
            </thead>
            <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>127.0.0.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>192.168.1.11</td>
                <td>8080</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>10.17.32.12</td>
                <td>8088</td>
            </tr>
            </tbody>
        </table>
        <!--灰幕-->
        <div class="c1 hide" id="i1">
        </div>
        <!--弹出框-->
        <div class="c2 hide" id="i2">
        <input type="text" /><br />
        <input type="text" />
        <div>
        <input type="button" value="取消"  onclick="hide();"/>
        <input type="button" value="确定" />
        </div>
        </div>
        </div>
        
        <script>
            function all01(){
                
                var tbody = document.getElementById('tb');
                var tr_list = tbody.children;
                for(var i=0;i<tr_list.length;i++){
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0];
                    checkbox.checked = true;
                }
            }
            function cancel(){
                
                var tbody = document.getElementById('tb');
                var tr_list = tbody.children;
                for(var i=0;i<tr_list.length;i++){
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0];
                    checkbox.checked = false;
                }
            }
            function reverse(){
                
                var tbody = document.getElementById('tb');
                var tr_list = tbody.children;
                for(var i=0;i<tr_list.length;i++){
                    var current_tr = tr_list[i];
                    var checkbox = current_tr.children[0].children[0];
                
                if (checkbox.checked){
                    checkbox.checked=false;
                }else{
                    checkbox.checked=true;
                }
                }
            }
        </script>
    

    相关文章

      网友评论

        本文标题:全选与反选

        本文链接:https://www.haomeiwen.com/subject/kdcnqxtx.html