为了账号安全,请及时绑定邮箱和手机立即绑定

用JS代码,模仿淘宝购物车全选功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>全选框</title>
    <style>
        a{text-decoration: none;}
    </style>
</head>
<body>
<form>
    <table cellpadding="5px" cellspacing="0px" style="background: url('images/list_bg.gif') no-repeat;" align="center">
        <!--表头分类部分-->
        <tr style="height: 65px;" valign="bottom">
            <th><input type="checkbox" name="cb" onclick="qx()"/>全选</th>
            <th>商品图片</th>
            <th>商品名称/出售者/联系方式</th>
            <th>价格</th>
        </tr>
        <!--内容商品第一行-->
        <tr>
            <td colspan="4" style="border-bottom: dotted 2px #999999"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" onclick="cx()"/></td>
            <td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list0.jpg"/></td>
            <td>
                <table cellpadding="5px" style="font-size: smaller;" align="center">
                    <tr>
                        <td colspan="2" align="center">杜比环绕,家庭影院必备,超真实享受</td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">出售者:ling112233</td>
                    </tr>
                    <tr>
                        <td align="center"><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/online_pic.gif"/></a></td>
                        <td><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list_tool_fav1.gif"/>收藏</a></td>
                    </tr>
                </table>
            </td>
            <td style="font-size: smaller;">一口价<br/>2833.0</td>
        </tr>
        <!--内容商品第二行-->
        <tr>
            <td colspan="4" style="border-bottom: dotted 2px #999999"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" onclick="cx()"/></td>
            <td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list1.jpg"/></td>
            <td>
                <table cellpadding="5px" style="font-size: smaller;" align="center">
                    <tr>
                        <td colspan="2" align="center">NVDIA 9999GT 512MB 256bit极品显卡,不容错过</td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">出售者:aipiaopiao110</td>
                    </tr>
                    <tr>
                        <td align="center"><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/online_pic.gif"/></a></td>
                        <td><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list_tool_fav1.gif"/>收藏</a></td>
                    </tr>
                </table>
            </td>
            <td style="font-size: smaller;">一口价<br/>6464.0</td>
        </tr>
        <!--内容商品第三行-->
        <tr>
            <td colspan="4" style="border-bottom: dotted 2px #999999"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" onclick="cx()"/></td>
            <td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list2.jpg"/></td>
            <td>
                <table cellpadding="5px" style="font-size: smaller;" align="center">
                    <tr>
                        <td colspan="2" align="center">精品热卖:高清晰,30寸等离子电视/td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">出售者:阳光的挣扎</td>
                    </tr>
                    <tr>
                        <td align="center"><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/online_pic.gif"/></a></td>
                        <td><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list_tool_fav1.gif"/>收藏</a></td>
                    </tr>
                </table>
            </td>
            <td style="font-size: smaller;">一口价<br/>18888.0</td>
        </tr>
        <!--内容商品第四行-->
        <tr>
            <td colspan="4" style="border-bottom: dotted 2px #999999"></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cb" onclick="cx()"/></td>
            <td><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list3.jpg"/></td>
            <td>
                <table cellpadding="5px" style="font-size: smaller;" align="center">
                    <tr>
                        <td colspan="2" align="center">Sony索尼家用最新款笔记本</td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">出售者:疯狂的镜无</td>
                    </tr>
                    <tr>
                        <td align="center"><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/online_pic.gif"/></a></td>
                        <td><a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/list_tool_fav1.gif"/>收藏</a></td>
                    </tr>
                </table>
            </td>
            <td style="font-size: smaller;">一口价<br/>5889.0</td>
        </tr>
    </table>
</form>
</body>
<script>
    function qx() {
        var cb = document.getElementsByName("cb");
        for (var i = 0; i < cb.length; i++) {
            if (cb[0].checked) {
                cb[i + 1].checked = true;
            } else {
                cb[i + 1].checked = false;
            }
        }
    }
    function cx() {
        var cb = document.getElementsByName("cb");
        for (var i = 0; i < cb.length; i++) {
            if (cb[0].checked) {
                for (var i = 0; i < cb.length; i++) {
                    if (cb[i].checked == false) {
                        cb[0].checked = false;
                    }
                }
            } else {
                    if (cb[i].checked == true && cb[i + 1].checked == true) {
                        cb[0].checked = true;
                    }
                }
            }
    }
</script>
</html>
点击查看更多内容
28人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
61
获赞与收藏
656

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消