<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="check_all">全选
<input type="checkbox" id="un_check_all">全不选
<input type="checkbox" id="un_check">反选
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<script>
var check_all = document.getElementById('check_all');
var un_check_all = document.getElementById('un_check_all');
var un_check = document.getElementById('un_check');
var checkbox = document.getElementsByTagName('input');
var arr = new Array('check_all','un_check_all','un_check')
function testCheck(){
var bool = false;
for (var i=0;i<checkbox.length;i++){
if(!(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1))){
if(checkbox[i].checked){
bool = true;
break;
}
}
}
return bool;
}
function checkAll(){
for (var i=0;i<checkbox.length;i++){
if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
if(checkbox[i].getAttribute('id')=='check_all'){
console.log(1)
checkbox[i].checked = true
}else{
checkbox[i].checked = false
}
}else{
checkbox[i].checked = true
}
}
}
function unCheckAll(){
for (var i=0;i<checkbox.length;i++){
if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
if(checkbox[i].getAttribute('id')=='un_check_all'){
console.log(2)
checkbox[i].checked = true
}else{
checkbox[i].checked = false
}
}else{
checkbox[i].checked = false
}
}
}
function unCheck(){
for (var i=0;i<checkbox.length;i++){
if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
if(checkbox[i].getAttribute('id')=='un_check'){
console.log(3)
checkbox[i].checked = true
}else{
checkbox[i].checked = false
}
}else{
if(checkbox[i].checked == true){
checkbox[i].checked = false
}else{
checkbox[i].checked = true
}
}
}
}
check_all.onclick = function(){
checkAll()
}
un_check_all.onclick = function(){
unCheckAll()
}
un_check.onclick = function(){
unCheck()
}
</script>
</body>
</html>
b. 效果:
成都创新互联公司专注于企业全网营销推广、网站重做改版、施秉网站定制设计、自适应品牌网站建设、HTML5、商城网站建设、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为施秉等各大城市提供网站开发制作服务。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="toggle_check">全选/全不选
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<br>
<input type="checkbox">
<script>
var toggle_check = document.getElementById('toggle_check');
var checkbox = document.getElementsByTagName('input');
function testCheck(){
var bool = false;
for (var i=0;i<checkbox.length;i++){
if(!(checkbox[i].hasAttribute('id') && checkbox[i].getAttribute('id') == 'toggle_check')){
if(checkbox[i].checked){
bool = true;
break;
}
}
}
return bool;
}
function checkAll(){
for (var i=0;i<checkbox.length;i++){
checkbox[i].checked = true
}
}
function unCheckAll(){
for (var i=0;i<checkbox.length;i++){
checkbox[i].checked = false
}
}
toggle_check.onclick = function(){
var bool = testCheck()
if(bool){
unCheckAll()
}else{
checkAll()
}
}
</script>
</body>
</html>
b. 效果:
当前文章:纯js实现checkbox的全选、反选、全不选
浏览地址:https://www.cdcxhl.com/article24/ghigje.html
成都网站建设公司_创新互联,为您提供域名注册、网站策划、云服务器、虚拟主机、品牌网站制作、微信小程序
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联