checkbox 全选/取消

2022-06-07 14:34:03 阅读：157 来源： 互联网

标签：box checkbox checked che 取消 prop color 全选 var

<!DOCTYPE html>
<html>

<head>

.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;

//$("#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"));
//});

//$('#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>

</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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

checkbox 全选/取消