全选 单选 反选
一、编写全选 单选和反选框,关于css样式个根据自身需求自行编写
<input type="checkbox">全选
<input type="checkbox">反选
<ul>
<input type="checkbox">单选
<input type="checkbox">单选
<input type="checkbox">单选
</ul>
二、功能实现部分 引用jquery-1.11.0.js进行代码编写
<script>
$(function(){
// 全选功能
var num = 0;
$("input").eq(0).click(function(){
num++;
if(num % 2 == 1){
$("ul").children().prop("checked",true);
}else{
$("ul").children().prop("checked",false);
}
})
//单选中存在一个不为选中状态 全选则同样不为选中状态
$("ul").children().click(function(){
var count = 0
$("ul").children().map(function(){
if($(this).prop("checked")){
count++;
}
})
if(count == $("ul").children().length){
$("input").eq(0).prop("checked",true)
}else{
$("input").eq(0).prop("checked",false)
}
})
// 反选
$("input").eq(1).click(function(){
$("ul").children().map(function(){
if($(this).prop("checked") == true){
$(this).prop("checked",false)
}else{
$(this).prop("checked",true)
}
})
})
})
</script>