jquery实现复选框的全选与反选
复选框的全选和反选功能，是页面中常常会用到的功能，你是否可以很轻松地实现呢？下面是用jquery语法实现的这个实用的小功能。
<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>UntitledDocument</title>
<scripttype="text/javascript" src="js/jquery-1.3.1.js">
</script>
</head>
<body>
<formmethod="post" action="">
请选择您的爱好!
<br><inputtype="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox"name="items" value="足球"/>足球
<inputtype="checkbox" name="items" value="篮球"/>篮球
<inputtype="checkbox" name="items" value="游泳"/>游泳
<inputtype="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button"id="CheckedAll" value="全 选"/>
<input type="button"id="CheckedNo" value="全不选"/>
<input type="button"id="CheckedRev" value="反 选"/>
<inputtype="button" id="send" value="提 交"/>
</form>
</body>
<scriptlanguage="JavaScript">
//绑定全选、全不选复选框
$("#checkedAll_2").click(
function() {
if (this.checked) {
$("input[name='items']").attr("checked","checked");
}else {
//$("input[name='items']").attr("checked","");
$("input[name='items']").removeAttr("checked");
}
}
);
//响应全选按钮
$('#CheckedAll').click(function() {
$("input[name='items']").attr("checked","checked");
}
);
//响应全不选按钮
$('#CheckedNo').click(function() {
$("input[name='items']").attr("checked","");
}
);
//反选
$('#CheckedRev').click(function() {
$("input[name='items']").each(function() {
if (this.checked) {
$(this).attr("checked", "");
} else {
$(this).attr("checked", "checked");
}
}
)
}
);
</script>
</html>
扫一扫
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
