Jquery实现复选框全选与全不选

JavaScript07

Jquery实现复选框全选与全不选,第1张

1、创建一个html,然后在body标签添加如下图所示的代码,主要是在一个表格中包含多选框。

2、然后首要就是要引入jquery的库。注意jquery库的方式:<script src="js/jquery-1.8.3.js" ></script> 不能写成<script src="js/jquery-1.8.3.js" />这种方式。否则无效!大家可以去尝试一下这两个的差别。

3、然后再来一个jquery的加载函数,加载函数是jquery的标配。下面这种方式的话是属于比较简写的了。

4、接下来根据id获取全选框的元素,然后给全选框绑定点击事件。

5、在点击事件方法中完成:获取类属性值为checkOne的多选框;然后将通过prop(属性,值)方法,来将checked属性设置成跟全选/全不选框的checked一样。

CheckBox复选框JS实现全选全不选功能,很简单,就只需插入一小段js函数就行了。。。

<script language="javascript">

function cli(Obj)

{

//获取控制其它复选框的对象obj

var collid = document.getElementByIdx_x("all")

//获取需要全选,全不选功能的所有复选框

var coll = document.getElementsByName(Obj)

//如果obj被选中,则全选

if (collid.checked){

//循环设置所有复选框为选中状态

for(var i = 0i <coll.lengthi++)

coll[i].checked = true

}else{//取消obj选中状态,则全不选

//循环设置所有复选框为未选中状态

for(var i = 0i <coll.lengthi++)

coll[i].checked = false

}

}

</script>

----------------------------------------------------

下面是一组CheckBox复选框html代码

----------------------------------------------------

<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称')"> 全选

<input name='多选项名称' type='checkbox' value='' > A

<input name='多选项名称' type='checkbox' value='' > B

<input name='多选项名称' type='checkbox' value='' > C

<input name='多选项名称' type='checkbox' value='' > D

<input name='多选项名称' type='checkbox' value='' > E

<input name='多选项名称' type='checkbox' value='' > F

----------------------------------------------------