对于全选框的操作分为两种情况:
1.单击全选框,下面全部选中
2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中。
html样式
<tr>
<td>爱 好</td>
<td>
<label for=""><input type="checkbox" name="fav" id="" value="苹果" class="btn"/>苹果</label>
</td>
<td>
<label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label>
</td>
<td>
<label for=""><input type="checkbox" name="" id="checkAll" value="全选" class="btn"/>全选</label>
</td>
</tr>
js样式
var oChkAll = document.getElementById("checkAll");
//全选
oChkAll.onclick = function() {
for(var i = 0; i < oFav.length; i++) {
oFav[i].checked = this.checked;
}
}
//复选框组
for(var i = 0; i < oFav.length; i++) {
oFav[i].onclick = function() {
//如果全选
if(isChkAll()) {
oChkAll.checked = true;
} else {
oChkAll.checked = false;
}
}
}
//判断是否全选
function isChkAll() {
var all = oFav.length;
var chk = 0;
for(var i = 0; i < oFav.length; i++) {
if(oFav[i].checked) {
chk++;
}
}
if(all == chk) {
return true;
} else {
return false;
}
}
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对亿速云的支持!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。