js全选,反选,全不选

JavaScript016

js全选,反选,全不选,第1张

首先选择器写法就不对

document.getElementsByName['game'],至少这么写

其次

由于你所有input标签所有的name属性都不一样,不能批量选择,除非像楼上贴代码那哥们一样,把所有的复选框的name属性都改为game也可以。如果纯粹是为了达到目的话用document.getElementsByTagName("input"),能达到效果

另外,楼上也提到了,判断的等号==

还有提醒楼主一下,不要反复的使用选择器,少量代码无所谓,大量代码的情况下会降低运算效率的。

在楼主的代码基础上改了一下

//全选

function test()

{

  obj = document.getElementsByTagName("input")

for(var i=0i<obj.length-3i++)

{

var f=obj[i]

if(f.checked==false)

{

f.checked=true

}

}

}

//反选

function ftest()

{

obj = document.getElementsByTagName("input")

for( var i=0i<obj.length-3i++)

{

f=obj[i]

if(f.checked==false)

{

f.checked=true

}

else

{

f.checked=false

}

}

}

//全部取消

function CancelAll()

{

obj = document.getElementsByTagName("input")

for( var i=0i<obj.length-3i++)

{

f=obj[i]

if(f.checked==true)

{

f.checked=false

}

}

}

方法如下:

需要用到AngularJS特性:双向数据绑定

注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器。

效果:

代码如下:

<!DOCTYPE html>

<html lang="en" ng-app="myModule5"><!--3、ng-app="myModule5"启动ng并调用模块-->

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="css/bootstrap.css">

<title>全选/取消全选</title>

</head>

<body>

<div class="container" ng-controller="myCtrl5"><!--4、ng-controller="myCtrl5"启用控制器-->

<h2>全选和取消全选</h2>

<table class="table table-bordered">

<thead>

<tr>

<th>选择</th>

<th>姓名</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr>

<td>

<input ng-checked="selectAll" type="checkbox">

</td>

<td>Tom</td>

<td>

<button class="btn btn-danger btn-xs">删除</button>

</td>

</tr>

<tr>

<td>

<input ng-checked="selectAll" type="checkbox">

</td>

<td>Mary</td>

<td>

<button class="btn btn-danger btn-xs">删除</button>

</td>

</tr>

<tr>

<td>

<input ng-checked="selectAll" type="checkbox">

</td>

<td>King</td>

<td>

<button class="btn btn-danger btn-xs">删除</button>

</td>

</tr>

</tbody>

</table>

<input type="checkbox" ng-model="selectAll">

<span ng-hide="selectAll">全选</span>

<span ng-show="selectAll">取消全选</span>

</div>

<script src="js/angular.js"></script><!--1、引入angularJS-->

<script>

//2、创建自定义模块和控制器

angular.module('myModule5', ['ng']).

controller('myCtrl5', function($scope){

})

</script>

</body>

</html>

ps:AngularJs 简单实现全选,多选操作。

有几个地方可能有问题:

部分浏览器不支持form1.这种方法访问控件,使用document.方法。

if(elements[i].type=='checkbox') {

  if(elements[i].checked==false){

         elements[i].checked=true}}

这样写会比较好点:

if (elements[i].type == 'checkbox') elements[i].checked = !elements[i].checked