基本的JS表单操作:全选、不选,清空,来学习下。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="total">全选</button> <button id="choice">不选</button> <button id="reverse">反选</button><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""><br> <input type="checkbox" name="" id=""> </body> <script> var btn = document.getElementsByTagName("button"); var ins = document.getElementsByTagName("input"); for(var x in btn) { // 遍历 btn btn[x].onclick = function(event) { var event = window.event || event; // 兼容性写法 var btnId = event.target.id; // 声明 点击的事件id是哪个 for( var i = 0; i < ins.length; i++) { if(btnId == "total") { // 全选 ins[i].checked = true; }else if(btnId == "choice") { // 不选 ins[i].checked = false; }else { // 反选 ins[i].checked == true ? ins[i].checked = false : ins[i].checked = true; } } } } </script> </html>
网友评论文明上网理性发言 已有0人参与
发表评论: