时间:2021-07-01 10:21:17 帮助过:20人阅读
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
js函数
代码如下:
<script type="text/javascript">
function checkAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name)) {
el[i].checked = true;
}
}
}
function clearAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i=0; i<len; i++) {
if((el[i].type=="checkbox") && (el[i].name==name)) {
el[i].checked = false;
}
}
}
</script>
html
代码如下:
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g
<br />
<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3
<br />
<br />
<input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br />
<br />
<input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />
人气教程排行
- 213次 1 vue2 设置router-view默认路径的实例
- 213次 2 Vue-路由导航菜单栏的高亮设置方法
- 213次 3 基于Axios 常用的请求方法别名(详解)
- 213次 4 JavaScript+canvas实现七色板效果实例
- 212次 5 实现vuex的初始化方法
- 212次 6 jQuery:当鼠标快速移动时无法触发mouseleave事件的问题解决
- 212次 7 Array.slice()与Array.splice()的返回值类型_基础知识
- 212次 8 微信小程序使用swiper组件实现层叠轮播图
- 212次 9 element-ui 限制日期选择的方法(datepicker)
- 212次 10 vue-baidu-map 进入页面自动定位的解决方案(推荐)
- 212次 11 JS实现元素上下左右移动效果
- 212次 12 node.js中的emitter.on方法使用说明
- 211次 13 在js中如何实现图片左右滑动
- 211次 14 layui button 按钮弹出提示窗口,确定才进行的方法
- 211次 15 深入理解Vue生命周期、手动挂载及挂载子组件
- 211次 16 JS 使用for循环遍历子节点查找元素
- 210次 17 bootstrap如何设置表单必填
- 210次 18 bootstrap4兼容哪些浏览器
- 210次 19 jQuery实现追加数组并去重功能
- 210次 20 jQuery实现的在线答题功能_jquery