js html css实现复选框全选与反选
更新时间:2021年04月11日 15:15:07 作者:自在飞花轻似梦
这篇文章主要为大家详细介绍了js实现复选框全选与反选,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js复选框全选与反选实现代码,供大家参考,具体内容如下
<html> <head> <title>html+css+js实现复选框全选与反选</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="js,笔试题目" /> <style type="text/css"> table,tr,td { border:1px solid red; } </style> <script type="text/javascript"> function quanxuan() { for(var i=1;i<=3;i++) { var cbox_id="cb"+i; var cbox=document.getElementById(cbox_id); //alert(cbox.value); if(document.getElementById("cb_quanxuan").checked) cbox.checked=true; else cbox.checked=false;; } } function fanxuan() { for(var i=1;i<=3;i++) { var cbox_id="cb"+i; var cbox=document.getElementById(cbox_id); if(document.getElementById("cb_fanxuan").checked) {//选中反选框 if(cbox.checked) cbox.checked=false; else cbox.checked=true; } else { if(cbox.checked) cbox.checked=false; else cbox.checked=true; } } } </script> </head> <body> <form id="form1"> <table> <tr> <td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全选</td> <td>复选框全选案例</td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" id="cb1" value="1" />1</td> <td>我是傻逼1</td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" id="cb2" value="2" />2</td> <td>我是傻逼2</td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" id="cb3" value="3" />3</td> <td>我是傻逼3</td> <td> </td> <td> </td> </tr> <tr> <td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反选</td> <td>反选案例</td> <td> </td> <td> </td> </tr> </table> </form> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
这篇文章主要介绍了JSON在Javascript中的使用以及eval和JSON.parse的区别详细解析,本文对eval()和JSON.parse()的区别介绍的非常详细,需要的朋友可以参考下2017-09-09分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
在写JS的过程中,为了调试我们常常会写很多 console.log、console.info、console.group、console.warn、console.error代码来查看JS的运行情况,但发布时又因为IE不支持console,又要去掉这些代码,一不小心就会出错2012-04-04使用 JScript 创建 .exe 或 .dll 文件的方法
JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer 中的 JavaScript,实际上是指 JScript。2011-07-07uniapp中微信小程序与H5相互跳转以及传参详解(webview)
在单位做项目的时候碰到一个需求,需要从微信小程序跳转到H5页面,下面这篇文章主要给大家介绍了关于uniapp中微信小程序与H5相互跳转以及传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小编就为大家带来一篇深入理解事件冒泡(Bubble)和事件捕捉(capture)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论