首页 > 代码库 > 全选与反选

全选与反选

2024-08-16 02:28:59   219人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选/反选</title>
</head>
<style type="text/css">
    *{
    padding:0px;
        margin:0px;
    }
    #content{
        width:800px;
        border:1px solid grey;
        /*margin:50px auto;*/
    }
    table th {
        width: 200px;
    }
    table td{
        width: 200px;
        text-align: center;
    }
</style>
<body>
<div id="content">
    <table>
        <tr>
            <!-- <th>:table中的列标题（自动加粗）-->
            <th><input type="checkbox" name="setchoose">
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
            </th>
        </tr>
        <tr>
            <td><input type="checkbox" name="setchoose">
            <td>001</td>
            <td>张三</td>
            <td>F07</td>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" name="setchoose">
            <td>001</td>
            <td>张三</td>
            <td>F07</td>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" name="setchoose">
            <td>001</td>
            <td>张三</td>
            <td>F07</td>
            </td>
        </tr>
        <tr>
            <td><input type="checkbox" name="setchoose">
            <td>001</td>
            <td>张三</td>
            <td>F07</td>
            </td>
        </tr>
    </table>
</div>
<!--按钮-->
<input type="button" value="http://www.mamicode.com/全选" onclick="allcheck()"/>
<input type="button" value="http://www.mamicode.com/反选"  onclick="nocheck()"/>
<script type="text/javascript">
    var chkall=document.getElementsByName("setchoose");//获取复选框的id
//    全选
    function allcheck(){
        for(var i=0;i<chkall.length;i++){
       chkall[i].setAttribute("checked","checked");//默认选中
        }
    }
//    全不选
    function nocheck(){
        for(var i=0;i<chkall.length;i++){
          chkall[i].removeAttribute("checked");//删除默认选中的属性
        }
    }
</script>
</body>
</html>

<!--1、属性操作：
元数对象.setAttribute(属性名,属性的值);//设置属性的值，也可以添加属性的值
元数对象.removeAttribute(属性名);//删除对应的属性
元数对象.attributes;//返回这个元素上的所有属性，返回的是数组
元数对象.getAttribute(属性名);//返回对应属性的值
2、访问节点的四种方式：
（1）document.getElementBYId(id名称）
（2）document.getElementsBYTagName(标签名称）
（3）document.getElementsBYClassName(类名称）
（4）document.getElementsBYName(name值）

全选与反选


联系
我们