js 实现复选框全选和反选方法大全

最新推荐文章于 2022-08-26 17:40:58 发布

GrapeSSQ

最新推荐文章于 2022-08-26 17:40:58 发布

阅读量1k

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/GrapeSSQ/article/details/8833742

版权

学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

方法一：

//全选

function chooseAll()
    {
    var selects = document.getElementsByName('ids');
    for(var j=0;j<selects.length;j++)
    {
      selects[j].checked=true;
    }
    }

//反选
   function fanselect()
    {
    var selects = document.getElementsByName('ids');
    for(var j=0;j<selects.length;j++)
    {

      if(selects[j].checked==true)
      {
       selects[j].checked=false;
      }else
      {
       selects[j].checked=true;
      }
    }
    }

===========================================================================

方法二：

<html>
<title></title>
<head>
<script language="javaScript">

//全选或全部不选
function checkall() {
    var isChecked=(document.form1.checkAll.checked == true);
    var elements_all=document.form1.elements;
    for(i=0;i<elements_all.length;i++) {
        var element=elements_all[i];
        if(element.type=="checkbox") {
            element.checked=isChecked;
        }
    }
}

//是否有checkbox被选中
function anyChecked() {
    var elements_any=document.form1.elements;
    for(i=0;i<elements_any.length;i++) {
        var element=elements_any[i];
        if(element.checked == true) {
            return true;
        }
    }
    return false;
}

</script>

</head>
<body>
<form name="form1" Method="post" action="" οnsubmit="return anyChecked()">
全选:<input type="checkbox" id="checkAll"οnclick="checkall()" />
多项选择框列表:
<input type="checkbox" name="cb" value="1"/>
<input type="checkbox" name="cb" value="2"/>
<input type="checkbox" name="cb" value="3"/>
<input name="Submit" type="submit" value="submit">
</form>

</body>
</html>

======================================================================

方法三：

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
function checkAll(e,itemName){    //全选函数 e为全选对象,itemName 为子name
var aa=document.getElementsByName(itemName);
for(var i=0;i<aa.length;i++){
aa[i].checked=e.checked;
}
}

function checkItem(e,allName){   //当选取或取消选取没一个复选框时调用的函数
var all=document.getElementById(allName); //全选框对象
if(!e.checked){      //如果是取消选取那么全选框就取消选取
all.checked=false;
}
else{                 //如果是选取，就要判断其他是否都已经全部选取了
var aa=document.getElementsByName(e.name);
for(var i=0;i<aa.length;i++){
   if(!aa[i].checked){//如果有一个没有选上，那么就返回
    return;
   }
}
all.checked=true;//如果其他都选上了，全选框就要选上
}
}
</script>
<head>
<body>
<div id='container'>
      <table border=1 id='table1'>
        <tr>
            <th class='td1'><input type=checkbox id='selectAll' οnclick='checkAll

(this,"cb");'><label for='selectAll'>全选</label></th>
            <th>text</th>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb' οnclick='checkItem

(this,"selectAll");'></td>
            <td class='center'>11111</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'
            οnclick='checkItem(this,"selectAll");'></td>
            <td class='center'>22222</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'
            οnclick='checkItem(this,"selectAll");'></td>
            <td class='center'>33333</td>
        </tr>

        <tr>
            <td class='td1'><input type=checkbox name='cb'
            οnclick='checkItem(this,"selectAll");'></td>
            <td class='center'>44444</td>
        </tr>

      </table>

    </div>
</body>