js应用-常用全选/全部选按钮应用

来源：互联网发布：linux 解压命令编辑：程序博客网时间：2024/05/16 17:57
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">    //需求: 若 #checkedAll_2 被选中, 则 name=items 的 checkbox 都被选中    //若 #checkedAll_2 取消选中, 则 name=items 的 checkbox 都取消选中    //若 name=items 的 checkbox 都被选中, 则 #checkedAll_2 的 checkbox 也被选中    //若 name=items 的 checkbox 有一个没有被选中, 则 #checkedAll_2 取消选择.    //提示: 事件需要加给  #checkedAll_2, 获取 name=items 的 checkbox 数组    //判断是否被选中, 若被选择, 则 name=items 的 checkbox 都要被选择    //若没有被选择, 则 name=items 的 checkbox 都要取消选择    //根据是否存在 checked 属性来判断是否被选择, 可以使其 checked = true 被选择    //checked = false 取消选择.     //还需要给每个  name=items 的 checkbox 加响应函数    //判断  name=items 的 checkbox 是否都被选中: 选择的个数和总个数是否相等.    //若都被选择: 则使  #checkedAll_2 被选择    //若没有都被选择: 则使  #checkedAll_2 取消选择    window.onload = function(){        document.getElementById("checkedAll_2").onclick = function(){            var flag = this.checked;            var items = document.getElementsByName("items");            for(var i = 0; i < items.length; i++){                items[i].checked = flag;            }        }        var items = document.getElementsByName("items");        for(var i = 0; i < items.length; i++){            items[i].onclick = function(){                //记录有多少个 items 被选中了                var number = 0;                for(var j = 0; j < items.length; j++){                    if(items[j].checked){                        number++;                    }                }                document.getElementById("checkedAll_2").checked =                     (items.length == number);            }        }        document.getElementById("CheckedAll").onclick = function(){            for(var i = 0; i < items.length; i++){                items[i].checked = true;            }        }        document.getElementById("CheckedNo").onclick = function(){            for(var i = 0; i < items.length; i++){                items[i].checked = false;            }        }        document.getElementById("CheckedRev").onclick = function(){            for(var i = 0; i < items.length; i++){                items[i].checked = !items[i].checked;            }        }        document.getElementById("send").onclick = function(){            for(var i = 0; i < items.length; i++){                if(items[i].checked){                    alert(items[i].value);                }            }        }    }</script></head><body>    <form method="post" action="">        你爱好的运动是？<input type="checkbox" id="checkedAll_2" />全选/全不选         <br /> <input            type="checkbox" name="items" value="足球" />足球 <input type="checkbox"            name="items" value="篮球" />篮球 <input type="checkbox" name="items"            value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球        <br /> <input type="button" id="CheckedAll" value="全　选" /> <input            type="button" id="CheckedNo" value="全不选" /> <input type="button"            id="CheckedRev" value="反　选" /> <input type="button" id="send"            value="提　交" />    </form></body></html>
效果图:
这里写图片描述
这里写图片描述
阅读全文
0 0