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