博主信息
福哥的博客
博文
263
粉丝
3
评论
2
访问量
80455
积分:10
P豆:666.78

全选、不选和反选

2017年09月27日 21:03:45阅读数:1342博客 / 福哥的博客/ JS文章

全选、不选和反选

<html>
<meta charset="utf-8"/>
<head>
</head>
<body>
<form method="post" name="form1" id="form1" action="">
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_1" id="conn_id_1" value="1"/></td>
 <td>东邪</td>
 <td>PHP</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_2" id="conn_id_2" value="1"/></td>
 <td>西毒</td>
 <td>JAVA</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_3" id="conn_id_3" value="1"/></td>
 <td>南帝</td>
 <td>VB</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <td width="62" align="center"><input type="checkbox" name="conn_id_4" id="conn_id_4" value="1"/></td>
 <td>北丐</td>
 <td>ASP</td>
 <td>部门经理</td>
 <td>29</td>
 </tr>
 <br/><br/>
 <tr>
 <input type="button" onclick="uncheckAll(form1,status)" value="不选">
 <input type="button" onclick="checkAll(form1,status)" value="全选">
 <input type="button" onclick="switchAll(form1,status)" value="反选">
 </tr>
</form>
<script>
 function uncheckAll(form1,status){ //不选
 var elements = document.getElementsByTagName('input'); //获取input标签
 for(var i=0;i<elements.length;i++){ //根据标签的长度执行循环
 if(elements[i].type == 'checkbox'){ //判断对象中元素的类型
 if(elements[i].checked==true){ //判断当checked的值为TURE时
 elements[i].checked=false; //将checked赋值为FALSE
 }
 }
 }
 }

 function checkAll(form1,status){ //全选
 var elements = document.getElementsByTagName('input');
 for(var i=0;i<elements.length;i++){
 if(elements[i].type == 'checkbox'){
 if(elements[i].checked==false){
 elements[i].checked=true;
 }
 }
 }
 }

 function switchAll(form1,status){ //反选
 var elements = document.getElementsByTagName('input');
 for(var i=0;i<elements.length;i++){
 if(elements[i].type == 'checkbox'){
 if(elements[i].checked==true){
 elements[i].checked=false;
 }else if(elements[i].checked==false){
 elements[i].checked=true;
 }
 }
 }
 }
</script>
</body>
</html>


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 使用jquery实现功能的方法:首先引入jquery的库,并设置jquery的加载函数;然后根据id获取框的元素,并给框绑定点击事件;最后获取类属性值为checkOne的多框。
    本篇文章给大家介绍原生js是怎么实现的功能的,希望对需要的朋友有所帮助!
    这篇文章主要为大家详细介绍了js实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    本篇文章给大家介绍一下使用JavaScript实现“""功能的方法,文中通过示例代码介绍的非常详细。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
    ps删除了多余部分的解决办法:首先用区框起来要用的内容;然后点击【Ctrl+Shift+i】,再按Del键;接着在图层面板里双击解锁,并点击【delete】即可。
    ps的快捷键是【Ctrl+Shift+I】。
    javascript实现的方法:1、通过HTMLCSS创建一个表单;2、用DOM方法分别获取的“input”元素;3、设置一个变量isAllChecked;4、将isAllChecked
    ​PS中区快捷键是:1、使用鼠标右击择“向”;2、可以使用快捷键【shift+Ctrl+I】。
    ps快捷键是ctrl加Shift加I即“Ctrl+Shift+I”,其快捷键的使用方法是:首先使用photoshop打开一张图;然后使用区工具来做出一个区;最后按ps快捷键“Ctrl+Shift
    word按的键是:1、使用Word快捷键【Ctrl+A】进行;2、展开菜单栏中的【编辑】,并择【】按钮来;3、在文档的左边,鼠标连击三次;4、在文档的左边,鼠标连击三次;5、按【Ctrl
    wps文字的方法:首先打开WPS表格,点击菜单栏“开始”;然后找到“择”功能并点击;最后在下拉列表中,点击“项即可。
    excel快捷键ctrl加A,【Ctrl+A】也是office组件以及Windows系统中的快捷键;Excel中除了【Ctrl+A】可以外,还可以点击Excel表格左上角的三角形图标,进行表格
    excel快捷键是ctrl加A,【Ctrl+A】仅是Excel中的快捷键,也是office组件以及Windows系统中的快捷键;在Excel中除了Ctrl+A可以外,还可以点击Excel
    jquery获取中的checkbox复框的方法:1、获取勾的复框,代码为【console.log($(this).val())】;2、获取未勾的复框,代码为【console.log(
    解决方法:首打开需要进行操作的excel表格;然后点击页面顶部工具栏的“数据”项卡,择“高级”项;接着需要进行筛的表格;最后点击“筛”两次,即可筛完整的列表。
    word中文字的方法:首先双击桌面Word快捷方式图标启动Word;然后点击Word的开始菜单;接着点击Word开始工具栏右侧编辑上面的“择”按钮;最后在弹出菜单中择“”即可实现Word文字的
    jquery实现效果的方法:1、创建一个HTML示例文件;2、通过“$('input').click(function(){...}”方法判断当前框是否中即可。
    Excel自动筛高级筛的区别:1、自动筛把表格中的数据在筛出来后,数据还是在原来的表格上,而高级筛是把表格中的数据筛出来后,把数据复制到空白的单元格中;2、自动筛只能在固定的列中筛,高级筛可以自由择筛的区域
    javascript设置的方法:首先创建一个HTML示例文件;然后添加script标签并创建js代码;最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现功能即可。
    区别:1、两者的作用同,CSS择器找到元素后为设置该元素的样式,jQuery择器找到元素后添加行为;2、jQuery择器拥有更好的跨浏览器的兼容性;3、CSS择器jQuery择器的效率