本篇要学的知识就比较简单了,是对JavaScript中复选框的应用。
掌握复选框的全选和反选。
单选框和复选框比较类似
一般是一组为单位使用
使用的时候,name属性 一组是一样的。
全选、反选
示例图:
源码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>复选框</title> <!-- 单选框和复选框比较类似 一般是一组为单位使用 使用的时候,name属性 一组是一样的。 全选、反选 --> </head> <body> <input type="button" value="全选" οnclick="quan()"/> <input type="button" value="反选" οnclick="fan()"/> <input type="checkbox" name = "ball" value="篮球"/>篮球 <input type="checkbox" name = "ball" value="足球"/>足球 <input type="checkbox" name = "ball" value="排球"/>排球 <input type="checkbox" name = "ball" value="玻璃球"/>玻璃球 <script type="text/javascript"> function quan(){ //获取所有的复选框 //getElementsByName 根据名字获取节点数组 //遍历节点 var cs = document.getElementsByName("ball"); //将状态置为选中 //checked 选中状态 true/false for ( var i = 0; i < cs.length; i++) { cs[i].checked = true; } } //反选 function fan(){ var cs = document.getElementsByName("ball"); //将状态置为选中 //checked 选中状态 true/false for ( var i = 0; i < cs.length; i++) { cs[i].checked = !cs[i].checked; } } </script> </body> </html>