HTML
<table class="table-normal">
<thead>
<tr>
<th><input id="checkall" type="checkbox" class="aui-check"></th>
<th>名称</th>
<th>账号</th>
<th>行业</th>
<th>区域</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="aui-check" name="sub"></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>武汉</td>
</tr>
</tbody>
</table>
------------------------------------------------------------------------------------------------
CSS
.aui-check {
width: 20px;
height: 20px;
position: relative;
margin: 8px 10px;
background: url(../img/check.png) no-repeat center;
display: table;
float: left;
-webkit-appearance: none;
transition: background-color ease 0.1s;
text-align: center;
}
.aui-check:checked {
background: url(../img/checked.png) no-repeat center;
}
------------------------------------------------------------------------------------------------
JS
$('#checkall').on('click', function() {
$("input[name='sub']").prop("checked", this.checked);
})
$("input[name='sub']").on('click', function() {
var $subs = $("input[name='sub']");
$(".checkall").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
})
js实现全选功能
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 思路: 利用onmousedown事件实现拖拽。首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用...
- Node.js Request+Cheerio实现一个小爬虫-基础功能实现1:内容抓取Node.js Reques...
- Node.js Request+Cheerio实现一个小爬虫-基础功能实现1:内容抓取Node.js Reques...