关闭

javascript 原生态 checkbox 操作

447人阅读 评论(0) 收藏 举报
分类:

javascript 原生态 checkbox 操作


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        //循环给复选框赋值
        function ShowCheckBox() {
            var data = "T00201507001,T00201507002,T00201507003,T00201507004";
            var items = data.split(',');
            for (var i = 0; i < items.length; i++) {
                document.getElementById(items[i]).checked = true;
            }
        }

        //复选框选择事件之后控制总价
        function ShowSumTotal(id, num) {
            if (document.getElementById(id).checked == true) {
                var total = parseInt(num) + parseInt(document.getElementById("lblTotal").innerHTML);
                document.getElementById("lblTotal").innerText = total;
            }
            else {
                var total = parseInt(document.getElementById("lblTotal").innerHTML) - parseInt(num);
                document.getElementById("lblTotal").innerText = total;
            }
        }

        //动态获取table指定行列的数值
        function ShowTable() {
            alert(document.getElementById("testTable").rows[1].cells[3].innerHTML);
        }

        //全选
        function CheckAll(e, itemname) {
            var item = document.getElementsByName(itemname);
            if (item == undefined) return;
            for (var i = 0; i < item.length; i++) item[i].checked = e.checked;
        }
    </script>

</head>
<body>
    <input name="chkall" value="1" type="checkbox" onclick="CheckAll(this, 'ItemD')" class="qx" />全选<br /><br />
    <input type="checkbox" name="ItemD" id="T00201507001" value="T00201507001" onclick="ShowSumTotal('T00201507001', 1)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507002" value="T00201507002" onclick="ShowSumTotal('T00201507002', 2)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507003" value="T00201507003" onclick="ShowSumTotal('T00201507003', 3)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507004" value="T00201507004" onclick="ShowSumTotal('T00201507004', 4)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507005" value="T00201507005" onclick="ShowSumTotal('T00201507005', 5)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507006" value="T00201507006" onclick="ShowSumTotal('T00201507006', 6)" /><br />

    <table border="0" id="testTable">
        <tr>
            <td width="100">a</td>
            <td width="100">b</td>
            <td width="100">c</td>
            <td width="100">123</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>223</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>323</td>
        </tr>
        <tr>
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>423</td>
        </tr>
        <tr>
            <td>total:</td>
            <td>
                <span id="lblTotal">100</span>
            </td>
        </tr>
    </table>
    <br />
    <input type="button" value="设置特定复选框为选中状态" onclick="ShowCheckBox()" />
    <br />
    <br />
    <input type="button" value="获取table某一列数据" onclick="ShowTable()" />
</body>
</html>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:407095次
    • 积分:5548
    • 等级:
    • 排名:第4758名
    • 原创:210篇
    • 转载:2篇
    • 译文:1篇
    • 评论:32条
    最新评论