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>


实用的复选框操作——15分钟解决90%以上的javascript复选框操作

“复选框”页面: —————————————————————————————————————————————————————————————————— 实现功能: 1.点击标...
  • Allenalex
  • Allenalex
  • 2014年11月25日 18:45
  • 1679

JavaScript之checkbox选择

本文内容来自《15. 尚硅谷佟刚_JavaScript DOM编程实验之Select级联选择》视频教程,版权归期所有,仅作记录以备后查。效果如下: 源代码如下: ...
  • maxine_du
  • maxine_du
  • 2016年09月02日 09:58
  • 207

【JavaScript】DOM操作复选框

DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后,足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后,被选中的所有都变成未选中。点击"全选"按钮之后,足球、篮球...
  • u013517797
  • u013517797
  • 2015年08月26日 21:05
  • 1231

JavaScript操作checkbox复选框

JavaScript操作checkbox的方式和操作radio的方式相似,都是利用元素项的checked属性来完成。先获取checkbox元素集合,遍历集合,对集合中的每一项做操作。 这里讲几...
  • magi1201
  • magi1201
  • 2015年03月20日 22:59
  • 4802

JavaScript单选框复选框

html> html lang="en"> head> meta http-equiv="content-type" content="text/html" charset="UTF-8"> ...
  • pangqiandou
  • pangqiandou
  • 2016年09月27日 14:45
  • 1092

javascript 判断checkbox是否被选中

1.表单里有n个checkbox 的时候 如: function ifChecked() {   var a = document.getElementsByName("cashbagSaveYN...
  • dinglinhu
  • dinglinhu
  • 2008年06月03日 17:36
  • 17475

利用js实现checkbox的单选功能

项目需求:一、 调整原有“补货费用余额”字段调整为“补货费用余额(SBU)”,新增“补货费用余额(总部)”字段 备注:字段展示金额为总金额,后台按表单号对应金额 创建补货订单后,必须勾选费...
  • xiaozhouchou
  • xiaozhouchou
  • 2017年06月07日 15:01
  • 512

Javascript原生态

1、原生JavaScript实现字符串长度截取 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 1...
  • comeonJ
  • comeonJ
  • 2014年03月27日 09:05
  • 744

JavaScript获取和设置CheckBox状态

注意: 针对单个复选框的情况! var obj = document.getElementById("tt"); var value = obj.checked; alert(value);//...
  • hellostory
  • hellostory
  • 2011年11月17日 15:49
  • 10698

javascript操作checkbox

 功能分配     function toChecked(str)  {   var a = document.getElementsByName("menus");   var n = a.leng...
  • hfhwfw
  • hfhwfw
  • 2008年11月05日 23:07
  • 695
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 原生态 checkbox 操作
举报原因:
原因补充:

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