JavaScript:复选框事件的处理
复选框事件的处理
复选框本身也是多个组件的名字相同。所以在定义复选框的同事依然要使用document.all()取得全部的内容。
范例:操作复选框,要求是可以一个个去选择选项,也可以直接全选,全选按钮的状态根据选中的选项个数自动变化,即全选按钮的状态会自动取消或者自动勾选。
<!doctype html> <html lang = "zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content="this is a checkbox example"> <meta name="keywords" content="checkbox,html,js"> <title>复选框的测试</title> <script type="text/javascript"> window.onload = function () { //获取复选框元素 var checkbox = document.all('checkbox'); var checkall = document.getElementById('checkAll'); /*点击全选按钮全部选中的情况*/ checkall.addEventListener('click',function(){ if (checkbox.length == undefined) {//一个选项时 checkbox.checked = checkall.checked; }else{ for (var i = 0; i < checkbox.length; i++) {//多个选项时 checkbox[i].checked = this.checked; } } },false); //全部按钮什么时候被自动选中以及自动取消 if (checkbox.length == undefined) {//一个选项时 checkbox.addEventListener('click',function(){ checkall.checked = checkbox.checked; },false); }else{ for (var i = 0; i < checkbox.length; i++) {//多个选项时 checkbox[i].addEventListener('click',function(){ for (var i = 0; i < checkbox.length; i++){ if (!checkbox[i].checked) { checkall.checked = false; //全选自动取消 break; }else{ if (i == checkbox.length -1) { checkall.checked = true;}; //全选自动勾选 } } },false); } } //打印您所有的选择 document.getElementById('selecteBtn').addEventListener('click',function() { /*一个个去选择时的情况*/ var yourchoose = "您选择的爱好有:"; if (checkbox.length == undefined) {//一个选项时 if (checkbox.checked) yourchoose = yourchoose + checkbox.value; }else{ for (var i = 0; i < checkbox.length; i++) {//多个选项时 if (checkbox[i].checked) yourchoose = yourchoose + checkbox[i].value + "、"; }; } alert(yourchoose); },false); } </script> </head> <body> <form action=""> 您的爱好有:<br/> <input type="checkbox" name="checkbox" id="checkbox" value="电影">电影<br/> <input type="checkbox" name="checkbox" id="checkbox" value="音乐">音乐<br/> <input type="checkbox" name="checkbox" id="checkbox" value="看书">看书<br/> <input type="checkbox" name="checkbox" id="checkbox" value="打球">打球<br/> <input type="checkbox" name="checkbox" id="checkbox" value="爬山">爬山<br/> <input type="checkbox" name="checkbox" id="checkbox" value="游泳">游泳<br/> <input type="checkbox" name="checkAll" id="checkAll" value="以上全部">以上全部<br/> <input type="button" name="selecteBtn" id="selecteBtn" value="选择"> </form> </body> </html>
效果截图如下:
默认状态时:
没有全选时:
全选时:
程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!