第一步：编写前端页面test.html，JQuery核心文件jquery.js见附件
<head>
<title>JQuery实现checkbox的全/不全选，以及反选功能</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="text.js"></script>
</head>
<body>
<input type="button" id="sel" value="全选" />
<input type="button" id="dissel" value="反选" />
<input type="checkbox" value="1" />CheckBox1
<input type="checkbox" value="2" />CheckBox2
<input type="checkbox" value="3" />CheckBox3
<input type="checkbox" value="4" />CheckBox4
</body>
</html>
第二步：编写text.js文件
$(function(){
var checkboxs = $("input[type='checkbox']");
var flag = true;
$("#sel").click(function(){
if($("#sel").val()=="不全选"){
$("#sel").val("全选");
flag = false;
}else{
$("#sel").val("不全选");
flag = true;
}
checkboxs.each(function(){
flag?$(this).attr("checked",true):$(this).removeAttr("checked");
});
});
$("#dissel").click(function(){
checkboxs.each(function(){
$(this).attr("checked")?$(this).removeAttr("checked"):$(this).attr("checked",true);
});
});
});
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
