JavaScript的基础应用之复选框

来源：互联网发布：网络逗逗迪迪爱探险编辑：程序博客网时间：2024/06/04 18:12

本篇要学的知识就比较简单了，是对JavaScript中复选框的应用。

掌握复选框的全选和反选。

单选框和复选框比较类似一般是一组为单位使用   使用的时候，name属性 一组是一样的。全选、反选

示例图：

源码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>复选框</title>    <!--       单选框和复选框比较类似       一般是一组为单位使用          使用的时候，name属性 一组是一样的。       全选、反选    --></head><body><input type="button" value="全选" onclick="quan()"/><input type="button" value="反选" onclick="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>

阅读全文

1 0