checkbox 单选功能

最新推荐文章于 2024-10-11 10:36:01 发布

原创最新推荐文章于 2024-10-11 10:36:01 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #xhtml #html #文档

html 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，其中包含五个具有相同名称属性的复选框，并通过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>无标题文档</title>

</head>

<body>
<input type="checkbox" name="test" onclick="checkedThis(this);">1
<input type="checkbox" name="test" onclick="checkedThis(this);">2
<input type="checkbox" name="test" onclick="checkedThis(this);">3
<input type="checkbox" name="test" onclick="checkedThis(this);">4
<input type="checkbox" name="test" onclick="checkedThis(this);">5

<script>
function checkedThis(obj){
var boxArray = document.getElementsByName('test');
for(var i=0;i<=boxArray.length-1;i++){
if(boxArray[i]==obj && obj.checked){
boxArray[i].checked = true;
}else{
boxArray[i].checked = false;
}
}
}

</script>
</body>
</html>