js实现全选删除

htmL:

<div>
    <form action="" method="post">
        <table border="1px">
            <tr>
               <th>
                <input type="Checkbox" οnclick="checkAll(this)" id="all"/>全选
              th>
                <th>用户编号th>
                <th>用户账号th>
                <th>用户姓名th>
                <th>用户性别th>
                <th>用户年龄th>
               <th>家庭住址th>
            tr>
            <tr>
                <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10010"/>td>
                <td>10010td>
                <td>roottd>
                <td>小别td>
                <td>td>
               <td>22td>
                <td>河南td>
            tr>
            <tr>
               <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10011"/>td>
                <td>10011td>
                <td>roottd>
                <td>小李td>
                <td>td>
                <td>23td>
                <td>河南td>
            tr>
            <tr>
                <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10012"/>td>
                <td>10012td>
                <td>roottd>
                <td>小赵td>
                <td>td>
                <td>21td>
                <td>河南td>
            tr>
            <tr>
                <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10013" />td>
                <td>10013td>
                <td>roottd>
                <td>小周td>
                <td>td>
                <td>25td>
                <td>河南td>
            tr>
           <tr>
               <td><input type="Checkbox" name="box" οnclick="selectAll()" value="10014" />td>
                <td>10014td>
                <td>roottd>
               <td>小吴td>
                <td>td>
                <td>20td>
               <td>河南td>
            tr>
        table>

    form>
    div>

css:

<style type="text/css">
    *{margin:0px;padding:0px;}
     table{width:100%;text-align:center;}

style>

js:

function checkAll(obj){
             //alert(obj.checked);
            //获取name=box的复选框
            var userids=document.getElementsByName("box"); //getElementsByName获取name的值
           //alert(userids.length);
            for(var i=0;i<userids.length;i++){
                     userids[i].checked=obj.checked;
                 }
         }

function selectAll(){
            //获取name=box的复选框
             var userids=document.getElementsByName("box");
             var count=0;
             //遍历所有的复选框
             for(var i=0;i<userids.length;i++){
                     if(userids[i].checked){
                             count++;
                         }
                 }
             //选中复选框的个数==获取复选框的个数


         }
还有另一种:

HTML:

看书:<input type="checkbox" name="checkbox" value=1><br>
写字:<input type="checkbox" name="checkbox"value=2><br>
玩游戏:<input type="checkbox" name="checkbox"value=4><br>
<button οnclick="checkboxed('checkbox')">全选button>
<button οnclick="uncheckboxed('checkbox')">取消全选button>

js:

function checkboxed(objName){
    var objNameList=document.getElementsByName(objName);

    if(null!=objNameList){
        // alert("全选操作");
        for(var i=0;i<objNameList.length;i++){
            objNameList[i].checked="checked";
        }
    }
}

function uncheckboxed(objName){
    var objNameList=document.getElementsByName(objName);

    if(null!=objNameList){
        // alert("取消全选操作");
        for(var i=0;i<objNameList.length;i++){
            objNameList[i].checked="";
        }
    }
}

你可能感兴趣的:(js实现全选删除)