复选框全选/全部选
程序员文章站
2023-02-05 14:28:55
复选框全选/全部选 ~~~javascript 你爱好的运动是什么?全选/全不选 足球 篮球 羽毛球 乒乓球 ~~~ 你爱好的运动是什么?全选/全不选 足球 篮球 羽毛球 乒乓球 ......
复选框全选/全部选
<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function() { /* 全选按钮点击按钮以后,四个多选框全部被选中 */ // 为idcheckedallbtn的按钮绑定一个单击相应函数 var item = document.getelementsbyname('items'); var checkedallbtn = document.getelementbyid('checkedallbtn'); checkedallbtn.onclick = function() { //获取四个多选框items // 遍历items for (var i = 0; i < item.length; i++) { // 设置四个多选框变成选中状态 // 通过多选框的checked属性可以来获取或者设置复选框是否被选中 item[i].checked = true; } } // 为checkednobtn的按钮绑定一个单击相应函数 var checkednobtn = document.getelementbyid('checkednobtn'); checkednobtn.onclick = function() { //获取v // 遍历items for (var i = 0; i < item.length; i++) { // 设置四个多选框变成选中状态 // 通过多选框的checked属性可以来获取或者设置复选框是否被选中 item[i].checked = false; } } // 为checkedrevbtn的按钮绑定一个单击相应函数 var checkedrevbtn = document.getelementbyid('checkedrevbtn'); checkedrevbtn.onclick = function() { //获取四个多选框items // 遍历items for (var i = 0; i < item.length; i++) { // 设置四个多选框变成选中状态 // 通过多选框的checked属性可以来获取或者设置复选框是否被选中 item[i].checked = !item[i].checked; } } // 为sendbtn的按钮绑定一个单击相应函数 var sendbtn = document.getelementbyid('sendbtn'); sendbtn.onclick = function() { //获取四个多选框items // 遍历items console.log(123); for (var i = 0; i < item.length; i++) { // 设置四个多选框变成选中状态 // 通过多选框的checked属性可以来获取或者设置复选框是否被选中 if(item[i].checked){ console.log(item[i].value); } } } //为checkedallbox的复选框绑定一个单击相应函数 var checkedallbox = document.getelementbyid('checkedallbox'); checkedallbox.onclick=function(){ for (var i = 0; i < item.length; i++) { // 设置四个多选框变成选中状态 // 通过多选框的checked属性可以来获取或者设置复选框是否被选中 item[i].checked=this.checked; } } //为四个多选框分别绑定点击响应函数 for (var i = 0; i<item.length;i++){ item[i].onclick=function(){ //将checkedallbox设置为选中状态 checkedallbox.checked=true; for(var j=0;j<item.length;j++){ // 判断四个多选框是否是全选 if(!item[j].checked){ // 一旦进入判断,则证明不是全选状态 // 将checkedallbox设置为没有选中状态 checkedallbox.checked=false; // 一旦进入判断 则已经得出结果 不用再继续执行循环 break; } } } } } </script> </head> <body> <form action="" method="post"> 你爱好的运动是什么?<input type="checkbox" id="checkedallbox" value="" /><label for="checkedallbox">全选/全不选</label> <br /> <input type="checkbox" name="items" id="1" value="足球" /><label for="1">足球</label> <input type="checkbox" name="items" id="2" value="篮球" /><label for="2">篮球<label> <input type="checkbox" name="items" id="3" value="羽毛球" /><label for="3">羽毛球</label> <input type="checkbox" name="items" id="4" value="乒乓球" /><label for="4">乒乓球</label> <br /> <input type="button" id="checkedallbtn" value="全 选" /> <input type="button" id="checkednobtn" value="全不选" /> <input type="button" id="checkedrevbtn" value="反 选" /> <input type="button" id="sendbtn" value="提 交" /> </form> </body> </html>
<!doctype html>
上一篇: sql server无法连接本地服务器
下一篇: C语言笔记 05_判断&循环&函数