Js_Checkbox全选反选案列

来源:互联网 发布:海康ivms4500软件下载 编辑:程序博客网 时间:2024/06/16 03:40

代码:

<!DOCTYPE html><html><head><title>checkboxs.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript">    //select 不行    function selects(value) {        //获取所有的 name=fav的<input type="checkbox" name="fav" value="java1"/>对象的集合        var favsDom = document.getElementsByName("fav");        if (value == 0) {            for (var i = 0; i < favsDom.length; i++) {                var favDom = favsDom[i];//获取具体的对象                if (favDom.checked) {                    favDom.checked = false;                }            }        } else if (value == 1) {            for (var i = 0; i < favsDom.length; i++) {                var favDom = favsDom[i];//获取具体的对象                if (!favDom.checked) {                    favDom.checked = true;                }            }        } else if (value == -1) {            for (var i = 0; i < favsDom.length; i++) {                var favDom = favsDom[i];//获取具体的对象                favDom.checked = !favDom.checked;            }        }    }</script></head><body>    <div>        <input type="checkbox" name="fav" value="java1" />java1<br /> <input            type="checkbox" name="fav" value="java2" />java2<br /> <input            type="checkbox" name="fav" value="java3" />java3<br /> <input            type="checkbox" name="fav" value="java4" />java4<br /> <input            type="checkbox" name="fav" value="java5" />java5<br /> <input            type="checkbox" name="fav" value="java6" />java6<br />    </div>    <div>        <input type="button" id="qx" value="全选" onclick="selects(1)" /> <input            type="button" id="fx" value="反选" onclick="selects(-1)" /> <input            type="button" id="qbx" value="全不选" onclick="selects(0)" />    </div></body></html>

效果:
这里写图片描述

3 0
原创粉丝点击