【java奇思妙想】关于JavaScript实现全选，全不选以及反选功能的示例

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.table{margin: 50px auto;font-size: 25px;width: 400px;height: 100px;}</style></head><body><table class="table" border="2" align="center"><tr><td colspan="4"><input type="button" value="全选" onclick="change('1')" name="schange"><input type="button" value="全不选" onclick="change('2')" name="schange"><input type="button" value="反选" onclick="change('3')" name="schange"></td></tr><tr><td><input type="checkbox" name="name"></td><td>1</td><td>张三</td><td>18</td></tr><tr><td><input type="checkbox" name="name"></td><td>2</td><td>李四</td><td>19</td></tr><tr><td><input type="checkbox" name="name"></td><td>3</td><td>王五</td><td>20</td></tr><tr><td><input type="checkbox" name="name"></td><td>4</td><td>赵六</td><td>21</td></tr></table></body>
</html>
<script type="text/javascript">function change(num){var changes = document.getElementsByName("schange");var arr = document.getElementsByName("name");if(num == 1){for(var i=0;i<arr.length;i++){arr[i].checked = true;}}else if(num==2){for(var i=0;i<arr.length;i++){arr[i].checked = false;}}else if(num==3){for(var i=0;i<arr.length;i++){if(arr[i].checked == true){arr[i].checked = false;}else if(arr[i].checked == false){arr[i].checked = true;}}}       }
</script>

【java奇思妙想】关于JavaScript实现全选，全不选以及反选功能的示例相关推荐

Javascript实现复选框(全选反选功能)
在一个项目开发中我们经常见到页面会有复选框的全选和反选功能,这样我们才能够进行下一步的批量删除或者实现其他的功能,那我们应该怎样去实现这样的一个功能呢?其实想要实现复选框的全选和反选功能很简单只要得到 ...
html bootstrap复选框全选,javascript+bootstrap+html实现层级多选框全层全选和多选功能代码实例...
想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里,接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能,需要的 ...
JavaScript实现复选框的全选/全不选和批量选择
实现数据的批量选择以及全选/全部选功能的效果如下所示: 代码如下: <a class="btn btn-default" id="search_like" ...
jQuery/javascript实现全选全不选
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Checkbox的练习< ...
JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。
一.Javacript设置全选的方法:首先创建一个HTML示例文件:然后添加script标签并创建js代码:最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现全选功能即 ...
php全选和反选,纯javascript实现选择框的全选与反选功能
HTML部分选择全部一键上路 js部分 var oinput = document.getElementById('all'); // var oinput_s = document.getEle ...
JavaScript实现全选/全不选操作
效果示例默认状态下: 勾选全选时: 任意取消勾选物品A/物品B/物品C时实现代码 <!DOCTYPE html> <html><head><meta ch ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
Java面试笔试题大汇总(最全+详细答案)
声明:有人说, 有些面试题很变态,个人认为其实是因为我们基础不扎实或者没有深入.本篇文章来自一位很资深的前辈对于最近java面试题目所做的总结归纳,有170道题目 ,知识面很广 ,而且这位前辈对于每个 ...

【java奇思妙想】关于JavaScript实现全选，全不选以及反选功能的示例

【java奇思妙想】关于JavaScript实现全选，全不选以及反选功能的示例相关推荐

最新文章

热门文章