JS实现全选、反选、不选

效果图：

代码如下，复制即可使用：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//全局加载var oi = document.getElementById("oi");//全选按钮获取节点var po = document.getElementById("po");//单选按钮获取节点var yu = document.getElementById("yu");//反选按钮获取节点var inp = document.getElementsByTagName("input");oi.onclick = function(){//全选按钮加载点击事件for(var i = 0;i < inp.length;i++){//全选按钮循环  小于按钮和的全选中 按钮个数和为i
                   inp[i].checked = true;//按纽的属性值小于按钮个数是=（真）true
               }}po.onclick = function(){for(var i = 0;i < inp.length;i++){inp[i].checked = false;}}yu.onclick = function(){for(var i= 0;i < inp.length;i++){if( inp[i].checked == true){inp[i].checked = false;}else {inp[i].checked = true;}}}}</script>
</head>
<body><input type="checkbox" value="足球" name="1" /><br/><input type="checkbox" value="足球" name="2" /><br/><input type="checkbox" value="足球" name="3" /><br/><input type="checkbox" value="足球" name="4"/><br/><input type="checkbox" value="足球" name="5" /><br/><input type="checkbox" value="足球" name="6" /><br/><input type="checkbox" value="足球" name="7" /><br/><input type="checkbox" value="足球" name="8" /><br/><input type="checkbox" value="足球" name="9" /><br/><input type="checkbox" value="足球" name="0" /><br/><input type="button" value="全选" id="oi"/><input type="button" value="不全选" id="po"/><input type="button" value="反选" id="yu"/>
</body></html>

如有错误，欢迎联系我改正，非常感谢！！！

转载于:https://www.cnblogs.com/yidaixiaohui/p/8447111.html

JS实现全选、反选、不选相关推荐

js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
[JS] checkbox 选中/全选/反选/不选
知识点: 1. jQuery: prop() 和 attr() attr('checked') 返回string类型 prop('checked') 返回Boolean类型结论:$(" ...
wpf--------------datagrid全选反选多选进行删除操作前后台
前台绑定 <DataGrid.Columns><DataGridTemplateColumn ><DataGridTemplateColumn.HeaderTemplat ...
JS 原生实现复选框全选反选功能
** JS 原生实现复选框全选反选功能 ** 按钮功能实现思路: 全选按钮: 直接将全选按钮的状态赋值给每一个复选框. 复选框:只有当所有的复选框选中时,全选按钮才能选中,所以每当复选框每点击一次就 ...
JS实现购物车全选、不选、反选的功能（十七）
JS实现购物车全选.不选.反选的功能(十七) 这里没有使用购物车啦,不过原理都是一样的啦效果: <!DOCTYPE html> <html lang="en"& ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
java做全选反选功能_[Java教程]js实现全选反选
[Java教程]js实现全选反选 0 2017-04-04 00:00:12 在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码快递 ...
js购物车实现全选反选删除...(附图片代码)
要求: 1.实现全选和全部选的功能.当商品被选中时,需要计算选择的商品数量和总计 2实现数量的加一或者减一.当数量改变时,需要重新计算小计:如果该商品被选中,则需要重新计算商品数量和总计.注意:商品 ...
用js创建表格及全选反选
用js创建表格及全选反选用js代码来实现创建表格,及全选反选,代码效果图如下: <!DOCTYPE html> <html lang="en"><h ...

JS实现全选、反选、不选

JS实现全选、反选、不选相关推荐

最新文章

热门文章