阿里买域名 电脑做网站,广州网站建设公司怎么挑选,网站开发用什么编辑器,厦门哪家公司做网站全选与反选在表单类的项目中还是很常见的#xff0c;电商项目中的购物车一定少不了这个功能。
下面我只就用一个简单的案例做个演示吧。 div classwraptabletheadtrthinput typecheckbox idj_cbA…全选与反选在表单类的项目中还是很常见的电商项目中的购物车一定少不了这个功能。
下面我只就用一个简单的案例做个演示吧。 div classwraptabletheadtrthinput typecheckbox idj_cbAll//thth商品/thth价格/th/tr/theadtbody idj_tbtrtdinput typecheckbox//tdtd小米手机/tdtd2000/td/trtrtdinput typecheckbox//tdtdThinkPad/tdtd5000/td/trtrtdinput typecheckbox//tdtdiPhone7/tdtd5000/td/trtrtdinput typecheckbox//tdtdiPhoneX/tdtd9000/td/tr/tbody/table 上面是是HTML部分代码做了一个表格。
下面是css代码 style* {padding: 0;margin: 0;}.wrap {width: 300px;margin: 100px auto 0;}table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;width: 300px;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px 微软雅黑;color: #fff;}td {font: 14px 微软雅黑;}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}/style 下面是js代码实现全选反选功能。 scriptvar all document.getElementById(j_cbAll);var tbody document.getElementById(j_tb);var checkboxes tbody.getElementsByTagName(input);//下面的单选框//点击all 让下面的的选中状态和all一致all.onclick function () {for (var i 0; i checkboxes.length; i ) {checkboxes[i].checked all.checked;}};//让下面的影响上面//点击每一个都判断 如果每一个都选中了 all就选中 否则不选中for (var i 0; i checkboxes.length; i ) {checkboxes[i].onclick function () {var isCheckedAll true;for (var i 0; i checkboxes.length; i ) {if (!checkboxes[i].checked) {isCheckedAll false;break;}}all.checked isCheckedAll;};}/script上面就是这个案例的效果了。
当然这个还可以扩展一下做成一个购物车的案例。
更多专业前端知识请上
【猿2048】www.mk2048.com
