1.Jquery 实现click 选中checkbox 多选(或一键选中全部或取消全部)实例代码
1.1 展示效果图:
2.2 css 样式:
<style>
.bottom-block-layer-div{
left: 48rem;
width: 60%;
color: #fff;
display: inline-flex;
position: fixed;
bottom: 2px;
z-index: 999;
}
.bottom-block-layer-li{
width: 120px;
box-shadow: inset 0 0 0px 0px #0081ff;
background-color: rgba(0,3,7,0.3);
border-left: 2px solid #072e7d;
margin-left: 5px;
font-size: 12px;
text-align: center;
font-size: 0.2rem;
}
.bottom-block-layer-li li:nth-of-type(1){
text-align: left;
margin: 5px 5px 5px 4px;
padding: 5px 5px 5px 0px;
}
.bottom-block-layer-li li:nth-of-type(2){
background-color: #093c70;
padding: 8px;
text-align: left;
padding-left: 21px;
color: white;
font-weight: bold;
}
.bottom-block-layer-li li,.bottom-block-layer-title li{
list-style-type: none;
}
.bottom-block-layer-li li:nth-of-type(1) span{
position: absolute;
top: 12px;
margin-left: 4px;
}
.bottom-block-layer-li li:nth-of-type(1) input{
margin-left: 2px;
}
.bottom-block-layer-li li:nth-of-type(2) span{
margin-right:5px;
}
.bottom-block-layer-title{
font-size: 12px;
padding: 8px;
background-color: rgb(9 60 112);
box-shadow: inset 0 0 0px 0px #00bcd4;
margin-left: 5px;
text-align: center;
}
</style>
2.2 HTML 代码:
<!--图层-->
<div class="bottom-block-layer-div" style="z-index: 10;">
<div class="bottom-block-layer-title">
<li>图</li>
<li>层</li>
</div>
<div class="bottom-block-layer-title">
<li><input type="checkbox" name="" id="allCheck" value="" style="position: relative;left: 0px;top:2px;"></li>
<li>全</li>
<li>部</li>
</div>
<div class="bottom-block-layer-li">
<li><input type="checkbox" class="input-checkbox-span" name="" value="金毛犬"><span>金毛犬</span></li>
<li><span>数量</span><span>12</span></li>
</div>
<div class="bottom-block-layer-li">
<li><input type="checkbox" class="input-checkbox-span" name="" value="泰迪犬"><span>泰迪犬</span></li>
<li><span>数量</span><span>12</span></li>
</div>
<div class="bottom-block-layer-li">
<li><input type="checkbox" class="input-checkbox-span" name="" value="阿拉斯加犬"><span>阿拉斯加犬</span></li>
<li><span>数量</span><span>212</span></li>
</div>
<div class="bottom-block-layer-li">
<li><input type="checkbox" class="input-checkbox-span" name="" value="柴犬"><span>柴犬</span></li>
<li><span>数量</span><span>112</span></li>
</div>
</div>
3.3 Jquery 代码:
//checkbox
var selAll = document.getElementById('allCheck'); // 全选
var selItem = document.getElementsByClassName("input-checkbox-span");// 单个选项
var checkedArray=[];//选中数据
//移除取消选中值
function fnDeleteCancelValue(value){
return checkedArray=checkedArray.filter(function(val,index){
if(val!=value){
return val;
}
})
}
//监听checkbox选中
$(".input-checkbox-span").off("click").on("click",function(){
var isChecked=this.checked;//得到当前checkbox状态
var getCheckedValue=this.value;//得到当前选中值
var checkboxCount=selItem.length;//选项总数
var checkedCount=$(".input-checkbox-span:checked").length;//选中选项总数
if(checkedCount==checkboxCount){
selAll.checked = true;
}else{
selAll.checked = false;
}
if(isChecked){
console.log("当前是选中:"+getCheckedValue);
checkedArray.push(getCheckedValue);
}else{
console.log("当前是取消:"+getCheckedValue);
fnDeleteCancelValue(getCheckedValue);
}
console.log(checkedArray);
});
//监听全部
function fnCheckedAll(){
var ischeck = selAll.checked;
checkedArray=[];//清空
for(var i = 0;i<selItem.length;i++){
selItem[i].checked = (ischeck ? true : false);
if(ischeck){
checkedArray.push(selItem[i].value);
}
}
console.log("当前是:"+(ischeck?"选中全部":"取消全部"));
console.log(checkedArray);
}
//监听全部
$("#allCheck").click(function (e){
fnCheckedAll();
});