版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39759115/article/details/80310524
1. 原生
此原生并非指原生js，而是原生的 checkbox 组件
<label for="checkAll">
<input type="checkbox" name="checkAll" id="checkAll" />全选
</label>
<label for="invertSelect">
<input type="checkbox" name="invertSelect" id="invertSelect" />反选
</label>
<label for="checkItem1">
<input type="checkbox" name="checkItem" id="checkItem1" />选项1
</label>
<label for="checkItem2">
<input type="checkbox" name="checkItem" id="checkItem2" />选项2
</label>
<label for="checkItem3">
<input type="checkbox" name="checkItem" id="checkItem3" />选项3
</label>1.1 注册
/**
* 注册全选(原生)
* @param selectAllName 全选name
* @param itemName 选项name
*/
function initCheckAll(selectAllName,itemName){
var _selectAllName = $("input[name="+selectAllName+"]"),
_itemName = $("input[name="+itemName+"]");
// 点击全选
_selectAllName.click(function(){
if(_selectAllName.is(":checked")){
_itemName.attr("checked",true);
}else{
_itemName.attr("checked",false);
}
});
// 点击item
_itemName.click(function(){
isSelectAllStatus(selectAllName,itemName)
});
}
/**
* 更新全选状态
* @param selectAllName 全选name
* @param itemName 选项name
*/
function isSelectAllStatus(selectAllName, itemName){
var _selectAllName = $("input[name="+selectAllName+"]"),
_itemName = $("input[name="+itemName+"]");
_itemName.each(function(){
if(!$(this).is(':checked')){
_selectAllName.attr('checked',false);
return false;
}else{
_selectAllName.attr('checked',true);
}
});
}
/**
* 注册反选(原生)
* @param invertSelectName 反选name
* @param itemName 选项name
* @param selectAllName 全选name （不传参数则不更新全选状态）
*/
function invertSelection(invertSelectName,itemName,selectAllName){
$("input[name="+invertSelectName+"]").click(function () {
$("input[name="+itemName+"]").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
if(!!selectAllName){
isSelectAllStatus(selectAllName, itemName);
}
});
}1.2 使用
initCheckAll("checkAll","checkItem");
invertSelection("invertSelect","checkItem","checkAll");2 自定义选择框
2.1 自定义选框图片
.draw-selected{
background: url("../img/draw-selected.png") 4px 7px no-repeat;
background-size: 14px;
color: #333333;
}
.draw-no-select{
background: url("../img/draw-no-select.png") 4px 7px no-repeat;
background-size: 14px;
color: #999999;
}
.draw-selected-circle{
background: url("../img/draw-selected-circle.png") 4px 7px no-repeat;
background-size: 14px;
color: #333333;
}
.draw-no-select-circle{
background: url("../img/draw-no-select-circle.png") 4px 7px no-repeat;
background-size: 14px;
color: #999999;
}2.2 html
<div>
<span class="tableHeaderChooseAll draw-no-select">全选</span>
</div>
<ul>
<li data-type="1" class="tableHeaderChoose draw-no-select">选项1</li>
<li data-type="2" class="tableHeaderChoose draw-no-select">选项2</li>
<li data-type="3" class="tableHeaderChoose draw-no-select">选项3</li>
<li data-type="4" class="tableHeaderChoose draw-no-select">选项4</li>
<li data-type="5" class="tableHeaderChoose draw-no-select">选项5</li>
<li data-type="6" class="tableHeaderChoose draw-no-select">选项6</li>
<li data-type="7" class="tableHeaderChoose draw-no-select">选项7</li>
<li data-type="8" class="tableHeaderChoose draw-no-select">选项8</li>
<li data-type="9" class="tableHeaderChoose draw-no-select">选项9</li>
<li data-type="10" class="tableHeaderChoose draw-no-select">选项10</li>
</ul>2.3 注册
// ---------------- 自定义选择框 -------------------
var _SELECTED_CIRCLE = "draw-selected-circle", // 已选择（圆形）
_NO_SELECT_CIRCLE = "draw-no-select-circle",// 已选择（圆形）
_SELECTED = "draw-selected",// 已选择（方形）
_N0_SELECT = "draw-no-select";// 未选择（方形）
/**
* 自定义图片全选框
* @param btn 全选按钮class
* @param tds 选项的class
* @param fn 不可选callback (参数1：当前选项、参数2：选项的class)
*/
function selectAll(btn,tds,fn){
var _self = $(btn),_tds = $(tds);
_self.click(function(){
if(_self.hasClass(_SELECTED_CIRCLE)){
changeClass(_SELECTED_CIRCLE,_NO_SELECT_CIRCLE,_SELECTED,_N0_SELECT);
}else{
changeClass(_NO_SELECT_CIRCLE,_SELECTED_CIRCLE,_N0_SELECT,_SELECTED);
}
});
function changeClass(removeClass,addClass,tdReClass,tdAddClass){
_self.removeClass(removeClass).addClass(addClass);
for(var j=0;j<_tds.length;j++){
if(typeof fn ==="function" && !fn($(_tds[j]),tds)){
continue
}
$(_tds[j]).removeClass(tdReClass||removeClass).addClass(tdAddClass||addClass);
}
}
}
/**
* 自定义图片选框(多选)
* @param itemClass 选项的class
* @param selected 选择状态的class
* @param noSelect 未选择状态的class
* @param fn 不可选callback (参数1：当前选项、参数2：选项的class)
*/
function selectItemMultiple(itemClass,selected,noSelect,fn){
$(itemClass).click(function(){
var _self = $(this);
if(typeof fn ==="function" && !fn(_self,itemClass)){
return
}
if(_self.hasClass(selected)){
_self.removeClass(selected).addClass(noSelect);
}else{
_self.removeClass(noSelect).addClass(selected);
}
});
}
/**
* 自定义图片选框(单选)
* @param itemClass 选项的class
* @param selected 选择状态的class
* @param noSelect 未选择状态的class
*/
function selectItemRadio(itemClass,selected,noSelect){
$(itemClass).click(function(){
$(itemClass).removeClass(selected).addClass(noSelect);
$(this).removeClass(noSelect).addClass(selected);
});
}
2.4 使用
// 全选
selectAll('.tableHeaderChooseAll','.tableHeaderChoose',function(ele){
return !(ele.attr('data-type') == 1); // 第一项不可选择
});
// 多选
selectItemMultiple('.tableHeaderChoose', _SELECTED, _N0_SELECT, function(ele,eleClass){
var headLength = $(eleClass).length;
return !(ele.attr('data-type') == 1 || ele.attr('data-type') == headLength); // 第一项和最后一项不可选择
});