<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多选框（全选/全不选）</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
ul,
li {
list-style: none;
}
</style>
</head>
<body>
<div id="mydiv">
<input id="button1" type="button" value="批量查岗" />
<div id="i1">
<ul id="list">
<li id="l1" class="l11" data-proCode="208" data-hostNum="1">选项一</li>
<li id="l2" class="l12" data-proCode="209" data-hostNum="2">选项二</li>
<li id="l3" class="l13" data-proCode="210" data-hostNum="3">选项三</li>
</ul>
</div>
</div>
<script>
$(document).on('click', '#button1', function () {
// 创建一个标签，将标签添加到指定标签里面
var tag1 = '<input type="checkbox" name="item" />';
$("#list li").each(function () {
$(this).prepend(tag1);
});
$("#button1").remove();
var tag2 =
'<input type="checkbox" id="all"><input type="button" value="全选" class="btn" id="selectAll"><input type="button" value="全不选" class="btn" id="unSelect"><input type="button" value="反选" class="btn" id="reverse"><input type="button" value="获得选中的所有值" class="btn" id="getValue">';
$('#mydiv').prepend(tag2);
});
</script>
<!-- 多选框的全选和全不选 -->
<script>
$(function () {
//全选或全不选
$(document).on("click", "#all", function () { //$(document).on('click', '#all', function () {})；这种选择器能获取动态加载的html属性
if (this.checked) {
$("#list :checkbox").prop("checked", true);
} else {
$("#list :checkbox").prop("checked", false);
}
});
//全选
var isCheckAll = $(document).on("click", "#selectAll", function () {
$("#list :checkbox,#all").prop("checked", true);
});
//全不选
$(document).on("click", "#unSelect", function () {
$("#list :checkbox,#all").prop("checked", false);
});
//反选
$(document).on("click", "#reverse", function () {
$("#list :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
allchk();
});
//设置全选复选框,根据复选个数更新全选框状态
$(document).on("click", "#list :checkbox", function () {
allchk();
});
//获取选中选项的值
$(document).on("click", "#getValue", function () {
//alert(1);
var params = [];
var hosts = $("#list :checkbox:checked");
if (hosts.length>0) {
hosts.each(function (i) {
var proParam = $(this).parent("li").attr("data-proCode");
var hostParam = $(this).parent("li").attr("data-hostNum");
params.push({ "proCode": proParam, "hostNum": hostParam });
});
var json = JSON.stringify(params);
alert(json);
}else{
alert("请至少选择主机/控制器！");
}
});
});
function allchk() {
var chknum = $("#list :checkbox").length; //选项总个数
var chk = 0;
$("#list :checkbox").each(function () {
if ($(this).prop("checked") == true) {
chk++;
}
});
if (chknum == chk) { //全选
$("#all").prop("checked", true);
} else { //不全选
$("#all").prop("checked", false);
}
}
</script>
</body>
</html>
禁用双击事件
$('#buttonPanLeft').unbind('dblclick');
$('#buttonPanLeft').dblclick(function(e){
e.stopPropagation();
e.preventDefault();
return false;
});