<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：jQuery实现的全选、反选和不选功能</title>
<!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>-->
<style>
.demo {
520px;
margin: 40px auto 0 auto;
min-height: 250px;
}
ul li {
line-height: 30px;
font-size: 14px
}
.btn {
overflow: hidden;
display: inline-block;
*display: inline;
padding: 4px 20px 4px;
font-size: 14px;
line-height: 18px;
*line-height: 20px;
color: #fff;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #5bb75b;
border: 1px solid #cccccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-left: 2px
}
</style>
</head>
<body>
<div id="main">
<div class="demo">
<ul id="list">
<li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
<li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
<li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
</div>
</div>
<script src="./lib/jquery/jquery-1.12.2.min.js"></script>
<script>
$(function () {
//全选或全不选
$("#all").click(function () {
if (this.checked) {
$("#list :checkbox").prop("checked", true);
} else {
$("#list :checkbox").prop("checked", false);
}
});
function cheaked() {
//1. 获取input总个数
var cheaknum = $('#list input').size();
//2. 创建一个点击个数
var xznum = '';
$('#list input').each(function () {
//3. 循环inpit 判断是否选中 选中就 ++
if ($(this).prop('checked') == true) {
xznum++
}
});
//4. 如果点击选中个数与总数相同则 $('#all') 状态 选中
if (cheaknum == xznum) {
$('#all').prop('checked',true);
}else{
$('#all').prop('checked',false);
};
};
$("#list input").click(function () {
cheaked()
});
// 获取选中input的数据
function data(){
$('#list input').each(function () {
if ($(this).prop('checked')){
alert($(this).parent().text());
}else{return}
});
};
$('.demo :button').click(function () {
data();
});
});
</script>
</body>
</html>