手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery全选checkBox功能实现代码(取消全选功能)
jquery全选checkBox功能实现代码(取消全选功能)
摘要:复制代码代码如下:NewDocumentcheckbox1checkbox2checkbox3checkbox4checkbox5check...

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<link href="css/ingrid.css" rel="stylesheet" type="text/css">

<script language="JavaScript" src="jquery-1.3.2.js" type="text/javascript"></script>

<SCRIPT LANGUAGE="JavaScript">

<!--

$("document").ready(function(){

$("#all").click(function(){

if(this.checked){

$("input[name='checkbox']").each(function(){this.checked=true;});

$("#btn1").attr("value","反选");

}else{

$("input[name='checkbox']").each(function(){this.checked=false;});

$("#btn1").attr("value","全选");

}

});

$("#btn1").click(function(){

$("[name='checkbox']").attr("checked",'true');//全选

})

$("#btn2").click(function(){

$("[name='checkbox']").removeAttr("checked");//取消全选

})

$("#btn3").click(function(){

$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

})

$("#btn4").click(function(){

$("[name='checkbox']").each(function(){

if($(this).attr("checked"))

{

$(this).removeAttr("checked");

}

else

{

$(this).attr("checked",'true');

}

})

})

$("#btn5").click(function(){

var str="";

$("[name='checkbox'][checked]").each(function(){

str+=$(this).val()+"/r/n";

})

alert(str);

})

})

//-->

</SCRIPT>

</HEAD>

<BODY>

<form name="form1" method="post" action="">

<input type="checkbox" id="all" name="all">

<input type="button" id="btn1" value="全选">

<input type="button" id="btn2" value="取消全选">

<input type="button" id="btn3" value="选中所有奇数">

<input type="button" id="btn4" value="反选">

<input type="button" id="btn5" value="获得选中的所有值">

<br>

<input type="checkbox" name="checkbox" value="checkbox1">

checkbox1

<input type="checkbox" name="checkbox" value="checkbox2">

checkbox2

<input type="checkbox" name="checkbox" value="checkbox3">

checkbox3

<input type="checkbox" name="checkbox" value="checkbox4">

checkbox4

<input type="checkbox" name="checkbox" value="checkbox5">

checkbox5

<input type="checkbox" name="checkbox" value="checkbox6">

checkbox6

<input type="checkbox" name="checkbox" value="checkbox7">

checkbox7

<input type="checkbox" name="checkbox" value="checkbox8">

checkbox8

</form>

</BODY>

</HTML>

【jquery全选checkBox功能实现代码(取消全选功能)】相关文章:

探索angularjs+requirejs全面实现按需加载的套路

jQuery预加载图片常用方法

jQuery实现鼠标经过图片变亮其他变暗效果

jQuery实现转动随机数抽奖效果的方法

jquery实现图片左右切换的方法

jQuery插件jRumble实现网页元素抖动

Js和JQuery获取鼠标指针坐标的实现代码分享

必须点击广告才能进入的代码

jQuery结合ajax实现动态加载文本内容

javascript实现youku的视频代码自适应宽度

精品推荐
分类导航