checkbox 全选与全不选

最新推荐文章于 2023-02-15 10:37:57 发布

原创最新推荐文章于 2023-02-15 10:37:57 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Java #XHTML #HTML

JS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个简单的网页功能——全选/取消全选所有复选框的方法。通过JavaScript函数实现对指定名称的复选框进行状态同步，便于用户进行批量操作。

<!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> select all or clear all</title> 
<style type="text/css"> 
p {margin:0;font-size:12px;line-height:26px;} 
</style> 
<script type="text/javascript"> 
function check_all(obj,cName) 
{ 
    var checkboxs = document.getElementsByName(cName); 
    for(var i=0;i<checkboxs.length;i++){
    checkboxs[i].checked = obj.checked;} 
} 
</script> 
</head> 

<body> 
<p><input type="checkbox" name="all" onclick="check_all(this,'checkbox')" />select all/clear all</p> 
<p><input type="checkbox" name="checkbox" value="" /></p> 
<p><input type="checkbox" name="checkbox" value="" /></p> 
<p><input type="checkbox" name="checkbox" value="" /></p> 
<p><input type="checkbox" name="checkbox" value="" /></p> 
</body> 
</html>