使用js实现复选框的全选、取消功能

id为all的想设置全选的那个框的id，name为checkname[]的是每个小复选框；

第一种：

<script>function checkAll() {var all=document.getElementById('all');//获取到点击全选的那个复选框的idvar one=document.getElementsByName('checkname[]');//获取到复选框的名称if(all.checked==true){//因为获得的是数组，所以要循环 为每一个checked赋值for(var i=0;i<one.length;i++){one[i].checked=true;}}else{for(var j=0;j<one.length;j++){one[j].checked=false;}}}</script>

第二种：

<span style="font-size:14px;"><script>function checkAll() {var all=document.getElementById('all');//获取到点击全选的那个复选框的idvar one=document.getElementsByName('checkname[]');//获取到复选框的名称//因为获得的是数组，所以要循环 为每一个checked赋值for(var i=0;i<one.length;i++){one[i].checked=all.checked; //直接赋值不就行了嘛

}}</script></span>

html代码：

    <thead><tr><td><input type="checkbox" name="all" id="all" onclick="checkAll()" /></td></tr></thead><tbody><td><input type="checkbox" name="checkname[]"value="1"/></td><td><input type="checkbox" name="checkname[]" value="2"/></td><td><input type="checkbox" name="checkname[]" value="3"/></td><td><input type="checkbox" name="checkname[]" value="4"/></td><td><input type="checkbox" name="checkname[]" value="5"/></td></tbody>

转载于:https://www.cnblogs.com/wuxu/p/10728618.html

使用js实现复选框的全选、取消功能相关推荐

js复选框之全选反选不选
今日分享:纯js复选框之全选&&反选&&不选想要了解其用法,首先先得了解它们各自的意思全选:全部都选中反选:选中的部分取消,没选中的部分勾选上不选:全部取消勾选 ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...
php 复选框全选和取消,基于JavaScript实现复选框的全选和取消全选
这篇文章主要为大家详细介绍了基于JavaScript实现复选框的全选和取消全选,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js复选框的全选和取消全选的具体代码,供大家参考, ...
复选框的全选、全不选、和获取选中的值；
1.获取select下面的选中的option值 <select id="afterSaleReson" name="afterSaleReson"> ...
如何利用jq来实现复选框的全选，反选！
如何利用jq来实现复选框的全选,反选! $("document").ready(function(){ $("#btn1").click(function() ...
Javascript第五章切换层效果、复选框的全选十三课
层切换效果: 效果复选框的全选
HTML复选框的全选、全不选以及单选操作。
今天在进行HTML的table练习的时候,发现一个比较有趣的知识点,有关于复选框的全选.全不选,以及单选操作的相关问题. 待我上网搜索了一下相关资料,发现有关于全选以及全不选的详解还是挺多的,但是复选 ...
复选框的全选和取消全选
复选框的全选和取消全选 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
JavaScript - 复选框的全选和取消
复选框的全选和取消 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w ...

使用js实现复选框的全选、取消功能

使用js实现复选框的全选、取消功能相关推荐

最新文章

热门文章