您的位置：首页 > Web前端 > JavaScript

js-复选框的全选，反选，不选

2017-12-08 13:42 239 查看

实现复选框的全选，反选，取消功能

效果图

点击’全选’，全部选中，点击’全不选’，全部不选，点击’反选’，选择未选的代码如下

<!DOCTYPE html>
<html>
<head>
<title>复选框变换</title>
<script type="text/javascript">
function allof() {
var languages = document.getElementsByName("language");//获取选项集
for(var i = 0;i<languages.length;i++)
languages[i].checked = true;
}
function allnot() {
var languages = document.getElementsByName("language");
for(var i = 0;i<languages.length;i++)
languages[i].checked = false;
}
function other() {
var languages = document.getElementsByName("language");
for(var i = 0;i<languages.length;i++)
if(languages[i].checked)
languages[i].checked = false;
else
languages[i].checked = true;
}
</script>
</head>
<body>
<input type="checkbox" name="language"> Java<br>
<input type="checkbox" name="language"> C#<br>
<input type="checkbox" name="language"> C++<br>
<input type="checkbox" name="language"> PHP<br>
<input type="checkbox" name="language"> Python<br>
<input type="checkbox" name="language"> VB<br>
<input type="button" value="全选" onclick="allof()">
<input type="button" value="全不选" onclick="allnot()">
<input type="button" value="反选" onclick="other()">

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 函数

相关文章推荐

新的分享

章节导航