前段时间做了一个全选和反选的功能,最近不忙了,做了一个简化版的demo。
全部代码如下:
<!DOCTYPE html>
<html>
<head>
<title>全选反选</title>
<style type="text/css">
ul,li{
list-style: none;
}
.btn {
margin-left: 40px;
}
</style>
</head>
<body>
<ul id="music"></ul>
<hr>
<div class="btn">
<label id="all">
<input type="checkbox" name="all">全选
</label>
<label id="reverse">
<input type="checkbox" name="reverse">反选
</label>
</div>
<pre></pre>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var data = [
'01.大海 ',
'02.天路 ',
'03.再回首 ',
'04.突然的自我 ',
'05.甘心情愿 ',
'06.光辉岁月 ',
'07.雨蝶 ',
'08.爱拼才会赢 ',
'09.我只在乎你 ',
'10..日不落'
];
var html = '';
for(var i = 0; i < data.length; i++){
html += '<li>'+
'<input type="checkbox" name="">'+
'<span>' + data[i] + '</span>'+
'</li>';
}
$('#music').html(html);
var $all = $('#all input');
var $reverse = $('#reverse input');
var $checkboxEl = $('#music').find('input[type="checkbox"]');
var len = $checkboxEl.length;
var n = 0; //input checkbox 选中的个数
$checkboxEl.on('click', function(){
if($(this).attr("checked") == 'checked'){
$(this).attr("checked", false);
n--;
}else{
$(this).attr("checked", true);
n++;
}
allIsChecked();
});
$all.on('click', function(){
if($(this).attr("checked") == 'checked'){
$(this).attr("checked", false);
$checkboxEl.attr('checked', false);
$checkboxEl.prop('checked', false);
n = 0;
}else{
$(this).attr("checked", true);
$checkboxEl.attr('checked', true);
$checkboxEl.prop('checked', true);
n = len;
}
});
$reverse.on('click', function(){
$checkboxEl.each(function(i, el){
if($(this).attr("checked") == 'checked'){
$(this).attr("checked", false);
$(this).prop("checked", false);
n--;
}else{
$(this).attr("checked", true);
$(this).prop("checked", true);
n++;
}
});
allIsChecked();
});
function allIsChecked(){
if(n == len){
$all.attr('checked', true);
$all.prop('checked', true);
}else{
$all.attr('checked', false);
$all.prop('checked', false);
}
}
})
</script>
</body>
</html>