[学习交流] [广州PHP]简单实现“全选”“反选”“取消”功能

本帖最后由 bingwei213 于 2018-7-20 20:33 编辑

[广州PHP]简单实现“全选”“反选”“取消”功能

[PHP] 纯文本查看 复制代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<table id="content" align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1">
    <tr>
        <th> </th>
        <th>ID</th>
        <th>姓名</th>
        <th>绰号</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="id[]" value="1"></td>
        <td>1</td>
        <td>宋江</td>
        <td>及时雨</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id[]" value="2"></td>
        <td>2</td>
        <td>卢俊义</td>
        <td>玉麒麟</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id[]" value="3"></td>
        <td>3</td>
        <td>吴用</td>
        <td>智多星</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id[]" value="4"></td>
        <td>4</td>
        <td>鲁智深</td>
        <td>花和尚</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="id[]" value="5"></td>
        <td>5</td>
        <td>林冲</td>
        <td>豹子头</td>
    </tr>
</table>
<table align="center" width="70%" rules="all" cellspacing="0" cellpadding="2" border="1">
    <tr>
        <td>
            <input type="button" value="全选" id="quanxuan">
            <input type="button" value="返选" id="fanxuan">
            <input type="button" value="取消" id="quxiao">
        </td>
    </tr>
</table>
<script>
    var checkboxs = document.getElementById('content').getElementsByTagName('input');
    document.getElementById('quanxuan').onclick = function () {
        for(var i=0; i<checkboxs.length; i++){
            if(checkboxs[i].checked == false){
                checkboxs[i].checked = true;
            }
        }
    }
    document.getElementById('fanxuan').onclick = function () {
        for(var i=0; i<checkboxs.length; i++){
            if(checkboxs[i].checked == false){
                checkboxs[i].checked = true;
            }else{
                checkboxs[i].checked = false;
            }
        }
    }
    document.getElementById('quxiao').onclick = function () {
        for(var i=0; i<checkboxs.length; i++){
            if(checkboxs[i].checked == true){
                checkboxs[i].checked = false;
            }
        }
    }
</script>
</body>
</html>

效果：

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] [广州PHP]简单实现“全选”“反选”“取消”功能

0 个回复