使用js实现全选 单选 全部选
来源:互联网 发布:数据库服务器 交换机 编辑:程序博客网 时间:2024/04/30 05:34
/ 思路:1、获取元素。2、用for循环历遍数组,把checkbox的checked设置为true即实现全选,
// 把checkbox的checked设置为false即实现不选。3、通过if判断,如果checked为true选中状态的,
全选:<input type="button" id="All" value="全选" /><br />
不选:<input type="button" id="uncheck" value="不选" /><br />
反选:<input type="button" id="othercheck" value="反选" /><br />
<div id="div">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
---------js代码--------
<script>
window.onload=function(){
var CheckAll=document.getElementById('All');
var UnCheck=document.getElementById('uncheck');
var OtherCheck=document.getElementById('othercheck');
var div=document.getElementById('div');
var CheckBox=div.getElementsByTagName('input');
CheckAll.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=true;
};
UnCheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=false;
};
};
othercheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
if(CheckBox[i].checked==true){
CheckBox[i].checked=false;
}
else{
CheckBox[i].checked=true
}
};
};
};
之前感觉很难学,后来思路清晰了感觉写起来也没那么难了。有不足之处大家指出来
// 把checkbox的checked设置为false即实现不选。3、通过if判断,如果checked为true选中状态的,
// 就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态。
html全选:<input type="button" id="All" value="全选" /><br />
不选:<input type="button" id="uncheck" value="不选" /><br />
反选:<input type="button" id="othercheck" value="反选" /><br />
<div id="div">
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
<input type="checkbox" /><br />
</div>
---------js代码--------
<script>
window.onload=function(){
var CheckAll=document.getElementById('All');
var UnCheck=document.getElementById('uncheck');
var OtherCheck=document.getElementById('othercheck');
var div=document.getElementById('div');
var CheckBox=div.getElementsByTagName('input');
CheckAll.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=true;
};
UnCheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
CheckBox[i].checked=false;
};
};
othercheck.onclick=function(){
for(i=0;i<CheckBox.length;i++){
if(CheckBox[i].checked==true){
CheckBox[i].checked=false;
}
else{
CheckBox[i].checked=true
}
};
};
};
之前感觉很难学,后来思路清晰了感觉写起来也没那么难了。有不足之处大家指出来
0 0
- 使用js实现全选 单选 全部选
- 原生js实现全选全部选
- js实现全选、单选
- C# 使用js 实现GridView 的全选 /单选
- JS实现单选、全选、反选
- 全选、全部选、反选操作的实现(JS)
- 利用js实现全选、全部选、反选功能
- js全选,全部选,反选
- js 全选 反选 导出全部
- jQuery实现全选,全部选,反选
- JS实现单选,多选,全选,反选,全不选
- JS实现单选、多选、全选、反选
- js实现 全选/反选 和 单选
- jquery实现全选,全部取消,反选
- js用单按钮实现checkbox全选/反选
- 使用js实现全选、反选功能
- PHP 全选/全部选
- js实现全选(全部取消)反向选择
- 开源Cortex-M模拟器QEMU的使用方法
- IOS pch 文件的设置
- 黑马程序员-----------中文乱码一
- ios在移动动画过程中响应触摸
- libpcap应用实例
- 使用js实现全选 单选 全部选
- iOS-UITextField限制输入的字符个数
- 编程日常
- 2020: C语言实验——计算表达式
- thinkphp
- view
- Nginx源码分析 - 初探Nginx的架构
- [Memcached]Memcached 的删除机制和发展方向
- effective C++笔记一