单选框复选框应用

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
                     //css样式
            <style>
                table,td{
                    width: 650px;
                    height: 10px;
                    margin: 0 auto;               /* 表格居中显示 */
                    border-top: 2px solid #444;     /* 表格的上边框 */
                    /*border-bottom: 2px solid #444;  !* 表格的下边框 *!*/
                    border-color: #444444;
                   background-color: chartreuse;
                }
                button{
                    background-color: burlywood;
                }
            </style>
                  //css样式
        </head>

<table>
    <tr>
        <td>电子产品</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="all" name="allcheck" onclick="checkall()">全选</td>
        <td>商品图片</td>
        <td>商品名称/出售者/联系方式</td>
        <td>价格</td>

    </tr>
    <tr>
        <td><input type="checkbox" id="a1" name="dx" onclick="singlecheck()"></td>
        <td><img style="width:100px " src="1.jpg"></td>
        <td>杜比环绕,家庭应是必备,超真实享受<br>
            出售者：ling112233
            <button onclick="">和我联系</button>
            <img  style="width: 10px " src="5.jpg"> 收藏</td>
        <td>一口价<br>
            <span id="jc1">2833.0</span></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="a2" name="dx" onclick="singlecheck()"></td>
        <td><img style="width: 100px" src="2.jpg"></td>
        <td>NVDIV 9999GT 512P18 256btf极品显卡，不容错过<br>
            出售者：aipiaopiao110
            <button onclick="">和我联系</button>
            <img  style="width: 10px " src="5.jpg"> 收藏</td>
        <td>一口价<br>
            <span id="jc2">6464.0</span></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="a3" name="dx" onclick="singlecheck()"></td>
        <td><img style="width: 100px" src="3.jpg"></td>
        <td>精品热卖：高清晰，30寸等离子电视<br>
            出售者：阳光的挣扎
            <button onclick="">和我联系</button>
            <img  style="width: 10px " src="5.jpg"> 收藏</td>
        <td>一口价<br>
            <span id="jcl3">18888.0</span></td>
    </tr>
    <tr>
        <td><input type="checkbox" id="a4" name="dx" onclick="singlecheck()"></td>
        <td><img style="width: 100px" src="4.jpg"></td>
        <td>Sorry索尔家用最新款笔记本<br>
            出售者：疯狂的镜无
            <button onclick="">和我联系</button>
            <img  style="width: 10px " src="5.jpg"> 收藏</td>
        <td>一口价<br>
            <span id="jcl4">5889.0</span></td>
    </tr>
</table>
<button onclick="sum()">求和</button>
<div id="dd"></div>
        <body>
<script>
    function getdall(){
        var did=document.getElementById("all")
        console.log(did)
    }
    function getname(){
        var dname=document.getElementsByName("dx")
        console.log(dname)
        for(i=0;i<dname.length;i++){
            console.log(dname[i])
        }
    }
    function gettag(){
        var dtag=document.getElementsByTagName("input")
        console.log(dtag.length)
    }
    //全选
    function checkall(){
        var dname=document.getElementsByName("dx")
        var did=document.getElementById("all")
        for(i=0;i<dname.length;i++){

            if(did.checked==true)
                dname[i].checked=true
            // else if (did.checked!=true)
            //     dname[i].checked=flase
            else
                dname[i].checked=false

        }
        if(did.checked==false)
            {

                console.log(1)
                for (i=0;i<dname.length;i++){
                    console.log(i)
                    dname[i].checked=false
                }

            }

    }
    //单选
    function singlecheck(){
        var dname=document.getElementsByName("dx")
        var did=document.getElementById("all")
        var j=0
        for(i=0;i<dname.length;i++) {
            if (dname[i].checked) {
                j++
                if(j==4) did.checked = true
            else
                did.checked = false
            }
        }

    }
    function sum(){
        var did1=Number(document.getElementById("jc1").innerText)
        var did2=Number(document.getElementById("jc2").innerText)
        var did3=Number(document.getElementById("jcl3").innerText)
        var did4=Number(document.getElementById("jcl4").innerText)
        var sum=Number(did1+did2+did3+did4)

        var dd = document.getElementById("dd")
        dd.innerText=sum
    }

</script>

</body>
</html>
单选框复选框应用

推荐阅读更多精彩内容
