本文主要是介绍JavaScript--点击按钮实现复选框全选和反选功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
功能实现：
1、点击全选和反选按钮，实现复选框全选和部分选的功能
2、点击全选复选框，实现子复选框全选或全不选功能
完整代码：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css"></style>
</head>
<body><table border="1"><tr><th><input type="checkbox" class="choose-all-input" οnclick="clickChooseAllInput()" /></th><th>学号</th><th>姓名</th><th>班级</th></tr><tr><td><input type="checkbox" class="choose-single" /></td><td>001</td><td>张三</td><td>李四</td></tr><tr><td><input type="checkbox" class="choose-single" /></td><td>002</td><td>F20</td><td>F20</td></tr></table><button οnclick="clickChooseAllBtn()">全选</button><button οnclick="clickChooseReverse()">反选</button>
</body>
<script type="text/javascript">var chooseAllInputEle = document.getElementsByClassName("choose-all-input")[0];var chooseSingleEles = document.getElementsByClassName("choose-single");function clickChooseAllInput() {if (chooseAllInputEle.checked) {choose("selected");} else {choose("");}}function clickChooseAllBtn() {chooseAllInputEle.checked = "checked";choose("selected");}function choose(status) {for (var i = 0; i < chooseSingleEles.length; i++) {chooseSingleEles[i].checked = status;}}function clickChooseReverse() {for (var i = 0; i < chooseSingleEles.length; i++) {if (chooseSingleEles[i].checked) {chooseSingleEles[i].checked = "";} else {chooseSingleEles[i].checked = "checked";}}}</script>
</html>这篇关于JavaScript--点击按钮实现复选框全选和反选功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
