javascript 原生态 checkbox 操作

原创 2015年07月10日 16:47:18

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>


相关文章推荐

JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成。先获取checkbox元素集合,遍历集合,对集合中的每一项做操作。 这里讲几...

原生态数据库sqlite操作

  • 2016年11月18日 10:07
  • 981KB
  • 下载

【JavaScript】原生态的兼容IE6的标签页

标签页是一个很常见的东西,在一些框架中也就很常见的, 但未必所有人都知道怎么写,很多人知道怎么在网上复制一份是真的, 这样不好,往往需要用大量的时间去修改网上复制下来的东西,还不如自己写一份快。 ...

纯原生态javascript+css3 写的3D魔方动画旋扭特效

纯原生态javascript+css3 写的3D魔方动画旋扭特效
  • lensgcx
  • lensgcx
  • 2017年04月26日 10:02
  • 752

原生态纯JavaScript 100大技巧大收集---你值得拥有

原生态纯JavaScript 100大技巧大收集---你值得拥有 1、原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; ...

【php】利用原生态的JavaScript Ajax为php进行MVC分层设计,兼容IE6

MVC只是一种设计模式而已,一度被认为Model 1,也就是服务器语句与HTML语句杂糅的php,其实不用任何框架,仅仅利用原生态的JavaScript Ajax也可以对其进行MVC设计。由于什么都没...

原生态javascript 右边栏

  • 2014年09月28日 01:11
  • 34KB
  • 下载

原生态Android操作介绍之一

原创文章,如有转载,请注明出处:http://blog.csdn.net/yihui823/article/details/6723185 记得我第一次接触Android的时候,觉得Android好...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 原生态 checkbox 操作
举报原因:
原因补充:

(最多只允许输入30个字)