滑动选择
最后更新于：2022-04-02 03:14:03
[TOC]
## selectabe 滑动选择
获取选中的值
```
//style
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
//js
$("#selectable").selectable({
stop:function(){
//.ui-selected 选择的类
//.ui-selecting 选择中的类的类
var selectArr=[];
$(this).find(".ui-selected").each(function(){
selectArr.push($(this).html())
console.log(selectArr); //["2", "3", "6", "7"]
})
},
})
```
table 列表勾选
```
.ui-selecting td { background: #c9cac9; }
//滑动选择
$(".selectable").selectable({
filter: 'tr',
delay:150,
distance:30,
selected:function( event, ui ){
//判断如果选中,则取消
var check = $(ui.selected).find("input[type='checkbox']");
if(!check.attr('checked')){
check.attr('checked','checked');//选中
}else{
check.attr('checked',null);//取消选中
}
}
});
```
';