jquery实现全选、反选、不选

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jquery实现全选、反选、不选</title>
<script src="jquery-1.9.1.js"></script>
<script>
function checkAll(){
$(":checkbox").prop("checked",true );
}
function checkNo(){
$(":checkbox").prop("checked",false);
}
function checkRev(){
$.each($(":checkbox"),function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}

$(function(){
var sec=$("body").append("<div></div>")//创建一个div追加到body里面
var input="";//创建一个空的变量
var arr=["井雨轩","小草","井小露","annie"];//创建一个数组,存放各个选项
for(var i=0;i<4;i++){
var index=i+1;
input+="<input type='checkbox' name='标题"+index+ "'value="+arr[i]+">"+arr[i]+"<br>";
}//把从0到4每一个创建的input收集到空变量里面
sec.append(input);//再把这些收集到的所有input追加到div里面
sec.append("<button onclick='checkAll()'>全选</button>");//创建全选按钮,并追加到div里面
sec.append("<button onclick='checkNo()'>全不选</button>");//创建全不选按钮,并追加到div里面
sec.append("<button onclick='checkRev()'>反选</button>");//创建反选按钮,并追加到div里面
});
</script>
</head>
<body>
</body>
</html>

posted @ 2016-10-26 11:03  2350305682  阅读(149)  评论(0编辑  收藏  举报