javascript 原生态 checkbox 操作

最新推荐文章于 2023-04-10 11:19:18 发布

KingCruel

最新推荐文章于 2023-04-10 11:19:18 发布

阅读量707

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/kingcruel/article/details/46832699

版权

JavaScript 专栏收录该内容

51 篇文章 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" οnclick="CheckAll(this, 'ItemD')" class="qx" />全选<br /><br />
    <input type="checkbox" name="ItemD" id="T00201507001" value="T00201507001" οnclick="ShowSumTotal('T00201507001', 1)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507002" value="T00201507002" οnclick="ShowSumTotal('T00201507002', 2)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507003" value="T00201507003" οnclick="ShowSumTotal('T00201507003', 3)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507004" value="T00201507004" οnclick="ShowSumTotal('T00201507004', 4)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507005" value="T00201507005" οnclick="ShowSumTotal('T00201507005', 5)" /><br />
    <input type="checkbox" name="ItemD" id="T00201507006" value="T00201507006" οnclick="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="设置特定复选框为选中状态" οnclick="ShowCheckBox()" />
    <br />
    <br />
    <input type="button" value="获取table某一列数据" οnclick="ShowTable()" />
</body>
</html>

KingCruel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 原生态 checkbox 操作

javascript 原生态 checkbox 操作 //循环给复选框赋值 function ShowCheckBox() { var data = "T00201507001,T00201507002,T00201507003,T00201507004"; var items =
复制链接

扫一扫