[JavaScript]复选框全部选中、反选及不选中

<!DOCTYPE html>
<html>
<head>
    <title>复选框全选、全不选及反选</title>
    <meta charset="utf-8" />
    <script type="text/javascript"> window.onload = function (){ //全选/选不选 document.getElementById("allOrNo").onclick = function (){ var form = document.getElementById("form"); var elements = form.getElementsByTagName("input"); for (var i = 0; i < elements.length; i++) { if (elements[i].getAttribute("type")=="checkbox") { if (this.checked) { elements[i].checked = "checked"; } else { elements[i].checked = null; } } } } //全选 document.getElementById("all").onclick = function (){ var form = document.getElementById("form"); var elements = form.getElementsByTagName('input'); for (var i = 0; i < elements.length; i++) { if (elements[i].getAttribute("type")=="checkbox") { //方法一:任何浏览器都支持 elements[i].checked = "checked"; //方法二:IE支持 //elements[i].setAttribute("checked","checked"); } } } //全不选 document.getElementById("noAll").onclick = function (){ var form = document.getElementById("form"); var elements = form.getElementsByTagName("input"); for (var i = 0; i < elements.length; i++) { if (elements[i].getAttribute("type")=="checkbox") { //方法一:任何浏览器都支持 elements[i].checked = null; //方法二:IE支持 //elements[i].setAttribute("checked",null); } } } //反选 document.getElementById("against").onclick = function (){ var form = document.getElementById("form"); var elements = form.getElementsByTagName("input"); //遍历表单的所有input标签 for (var i = 0; i < elements.length; i++) { //获取所有复选框 if (elements[i].getAttribute("type")=="checkbox") { if (elements[i].checked) { //如果复选框选中 , 设置为非选中状态 elements[i].checked = null; } else { //如果复选框非选中 , 设置为选中状态 elements[i].checked = "checked"; } } } } //获取复选框所有被选中的ID值 document.getElementById("get").onclick = function (){ var id = ""; var form = document.getElementById("form"); var elements = form.getElementsByTagName("input"); //遍历表单的所有input标签 for (var i = 0; i < elements.length; i++) { //获取所有复选框 if (elements[i].getAttribute("type")=="checkbox") { //如果复选框选中 if (elements[i].checked) { //获取ID var oneId = elements[i].getAttribute("id"); //拼接ID if (id=="") { id = oneId; } else { id = id + "," + oneId; } } } } //输出ID alert(id); } } </script>
</head>
<body>
请选择科目:<br/><br/>
<input type="checkbox" name="checkbox" value="全选/选不选" id="allOrNo">全选/选不选</input>
<br/><br/>
<form id="form">
    <input type="checkbox" name="subject" value="语文" id="1">语文</input>
    <input type="checkbox" name="subject" value="数学" id="2">数学</input>
    <input type="checkbox" name="subject" value="英语" id="3">英语</input>
    <input type="checkbox" name="subject" value="物理" id="4">物理</input>
    <input type="checkbox" name="subject" value="化学" id="5">化学</input>
    <input type="checkbox" name="subject" value="生物" id="6">生物</input>
</form>
<br/>
<input type="button" value="全选" id="all"></input>
<input type="button" value="全不选" id="noAll"></input>    
<input type="button" value="反选" id="against"></input>
<input type="button" value="获取所有被选中复选框的ID值" id="get"></input>               
</body>
</html>

你可能感兴趣的:(JavaScript,mysql,android,javaweb,jquary)