checkbox 全选/取消
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.container {
height: auto;
width: 95%;
margin: 20px auto;
border: 1px dotted #0094ff;
}
.container_c {
width: 90%;
margin: 30px auto;
height: 200px;
}
.btn {
float: left;
margin-right: 1px;
/* margin-top: 6px;*/
}
#result {
height: 160px;
width: 99%;
}
.alert {
display: none;
position: fixed;
top: 10%;
left: 50%;
min-width: 200px;
margin-left: -100px;
z-index: 99999;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-warning {
/*color: #8a6d3b;*/
text-align: center;
color: #f35f19;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.button {
background-color: #0094ff;
border: 1px solid #f44336;
color: white;
padding: 8px 33px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'Microsoft YaHei';
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #0084ff;
color: white;
}
textarea {
border: 1px solid #66afe9;
padding: 7px 0px;
border-radius: 3px;
padding-left: 5px;
font-size: 14px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
textarea:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
table {
table-layout: fixed;
word-wrap: break-word;
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*隐藏后添加省略号*/
white-space: nowrap; /*强制不换行*/
margin-bottom: 0px !important;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function () {
debugger;
var tbody = "";
var obj = [
{ "name": "项海军", "id": "1001", "age": "38", "bri": "2022-02-23" },
{ "name": "张翠山", "id": "1002", "age": "55", "bri": "2322-02-23" },
{ "name": "张丹丹", "id": "1003", "age": "12", "bri": "2422-02-23" }
];
$.each(obj, function (n, value) {
var trs = "";
trs += "<tr><td><input type='checkbox' name='cbk' class='c_box' value=" + value.id + " bri=" + value.bri + " age=" + value.age + " id=" + value.id + "></td><td>" + value.id + "</td><td>" + value.name + "</td><td>" + value.age + "</td><td>" + value.bri + "</td></tr>";
tbody += trs;
});
$("#check").append(tbody);
//$("#che_all").click(function () {
// debugger;
// $("#check input").prop("checked", $("#che_all").is(":checked"));
//});
//$("#check input").click(function () {
// debugger;
// var len = $(".c_box").length;
// var sum = $(".c_box:checked").length;
// if (len == sum) {
// $("#che_all").prop("checked", true);
// } else {
// $("#che_all").prop("checked", false);
// }
//})
$(document).on("click", "#che_all", function () {
debugger;
$("#check input").prop("checked", $("#che_all").is(":checked"));
})
$(document).on("click", "#check input", function () {
debugger;
var len = $(".c_box").length;
var sum = $(".c_box:checked").length;
if (len == sum) {
$("#che_all").prop("checked", true);
} else {
$("#che_all").prop("checked", false);
}
})
$("#refuse").click(function () {
debugger;
var sum = $(".c_box:checked").length;
if (sum <= 0) {
$('<div>').appendTo('body').addClass('alert alert-warning').html('<i class="fa fa-warning"></i> 请选择附件数据行……').show().delay(3500).fadeOut();
} else {
debugger
var params = [];
$("input[class='c_box']:checked").each(function (i) {
debugger;
var obj = {};
obj["id"] = $(this).val();
obj["name"] = $(this).attr("name");
obj["age"] = $(this).attr("age");
params.push(obj);
});
var id = "101";
var paras = JSON.stringify(params);
alert(paras);
}
});
//$("#che_all").click(function () {
// debugger;
// $("#check input").prop("checked", $("#che_all").is(":checked"));
//});
//$("#check input").click(function () {
// debugger;
// var len = $(".c_box").length;
// var sum = $(".c_box:checked").length;
// if (len == sum) {
// $("#che_all").prop("checked", true);
// } else {
// $("#che_all").prop("checked", false);
// }
//})
//$('#che_all').on('click', 'ab', function () {
// $("#check input").prop("checked", $("#che_all").is(":checked"));
//})
//$('#check input').on('click', 'a', function () {
// var len = $(".c_box").length;
// var sum = $(".c_box:checked").length;
// if (len == sum) {
// $("#che_all").prop("checked", true);
// } else {
// $("#che_all").prop("checked", false);
// }
//})
//$(document).on("click", "#che_all", function () {
// debugger;
// alert("dd");
// $("#check input").prop("checked", $("#che_all").is(":checked"));
//})
//$(document).on("click", "#check input", function () {
// debugger;
// var len = $(".c_box").length;
// var sum = $(".c_box:checked").length;
// if (len == sum) {
// $("#che_all").prop("checked", true);
// } else {
// $("#che_all").prop("checked", false);
// }
//})
});
</script>
</head>
<body>
<div class="container">
<table class="table table-condensed">
<caption>商机附件列表</caption>
<thead>
<tr>
<th width="3%"><input class="che_all" id="che_all" type="checkbox" /></th>
<th width="15%">Document name</th>
<th width="20%">Opportunity attachment type</th>
<th width="10%">Owner</th>
<th width="10%">Created On</th>
<!--<th>File Url</th>-->
</tr>
</thead>
<tbody id="check">
</tbody>
</table>
<div class="btn" style="">
<button class="button" id="refuse">复制</button>
</div>
</div>
</body>
</html>
标签：box,checkbox,checked,che,取消,prop,color,全选,var 来源： https://www.cnblogs.com/zhan-shuai/p/16351622.html