利用js实现全选、全部选、反选功能

最新推荐文章于 2021-05-14 19:36:14 发布

Monkey_Online

最新推荐文章于 2021-05-14 19:36:14 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： input button function xhtml javascript html

本文链接：https://blog.csdn.net/houqd2012/article/details/7981359

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function selectAll(name)
{
var el=document.getElementsByName(name);
for (var i=0;i<el.length;i++)
{
if(el[i].type=="checkbox"&&el[i].name==name)
{
el[i].checked=true;

}
}
}

function clearAll(name)
{
var el=document.getElementsByName(name);
for (var i=0;i<el.length;i++)
{
if(el[i].type=="checkbox"&&el[i].name==name)
{
el[i].checked=false;
}
}
}

function switcheck(name){
   var el = document.getElementsByName(name);
   for(var i=0;i<el.length;i++){
       if(el[i].type=="checkbox"&&el[i].name==name){
           if(el[i].checked == false){
               el[i].checked = true
           }else{
               el[i].checked = false;
           }
       }
   }
}

</script>
</head>

<body>
<p>以下是一个调查结果</p>
<form>
<input type="checkbox" name="coffee" value="apple"/>apple
<input type="checkbox" name="coffee" value="pear"/>pear
<input type="checkbox" name="coffee" value="berry"/>berry
<p></p>
<input type="button" value="全选" οnclick="selectAll('coffee')"/>
<input type="button" value="取消全选" οnclick="clearAll('coffee')"/>
<input type="button" value="反选" οnclick="switcheck('coffee')"/>
</form>
</body>

Monkey_Online

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用js实现全选、全部选、反选功能

无标题文档 function selectAll(name) { var el=document.getElementsByName(name); for (var i=0;i{ if(el[i].type=="checkbox"&&el[i].name==name) { el[i].checked=true; } } } functio
复制链接

扫一扫