java 全选 反选取值_全选反选以及获取选中的数据

演示：jQuery实现的全选、反选和不选功能

.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

}

• 1.时间都去哪儿了
• 2.海阔天空
• 3.真的爱你

$(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();

});

});