(12)全选商品列表:input type=checkbox 对象中的属性checked

获取所有名称为item的复选框,判断checked状态,选没选上,input type=checkbox 对象中的属性checked

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<script type="text/javascript">

      function getSum()
      {
          /*
          获取所有名称为item的复选框,判断checked状态,选没选上,input type=checkbox 对象中的属性checked
          */
          var sum=0;
          var collItemNodes=document.getElementsByName("item");

         for(var i=0;i<collItemNodes.length;i++)
         {
             if(collItemNodes[i].checked)
             {
                // alert(i+"----"+collItemNodes[i].value);
                 sum+=parseInt(collItemNodes[i].value);//这里必须将字符串转换为整型
             }
         }
         document.getElementById("gsum").innerHTML=sum;
      }
      function getAll()
      {
          var collItemNodes=document.getElementsByName("item");
          for(var i=0;i<collItemNodes.length;i++)
          {
              collItemNodes[i].checked=true;
          }
      }
      function Allnot()
      {
          var collItemNodes=document.getElementsByName("item");
          for(var i=0;i<collItemNodes.length;i++)
          {
              collItemNodes[i].checked=false;
          }
      }
</script>

    <input type="button" value="全选" onclick="getAll()"/><br/>


    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑<br/>

    <input type="button" value="全不选" onclick="Allnot()"/><br/>
    <br/>
    <input type="button" value="总额:" onclick="getSum()"/>
    <span id="gsum"></span>
</body>
</html>

这里写图片描述

posted @ 2017-08-08 13:23  测试开发分享站  阅读(155)  评论(0编辑  收藏  举报