全選反選以及獲取選中的數據
阿新 • • 發佈：2018-09-14
otto 獲得 mar -- bottom als his value wid
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：jQuery實現的全選、反選和不選功能</title>
<!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>-->
<style>
.demo {
width: 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>
全選反選以及獲取選中的數據