js中对复选框的一些操作和js中的表单对象

本文链接：https://blog.youkuaiyun.com/youyajie/article/details/8074846

网页中含有复选框时，可能含有几种操作，一种是全选和取消操作，还有一种就是根据你选中的内容在页面上有所显示。先来看看后一种，例子是计算选中的水果的价格，这样复选框的内容为每种水果和它对应的价格，而在复选框标签中value为对应的价格值，这样加一个点击事件，触发的函数传回本对象。这样根据value值，计算每次点击之后的总价，显示在页面上，代码为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyCart.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" language="javascript">
      function shop(obj) {
      var fruits = document.getElementsByName("fruit");
      var totalPrice=0;
        //遍历所有的checkbox，计算新的总价
        for(var i = 0; i < fruits.length; i++) {
          if(fruits[i].checked) {
            totalPrice+=parseFloat(fruits[i].value);
          }
        }
        document.getElementById("myspan").innerText=totalPrice+"元";
      }
    </script>
  </head>
  
  <body>
    <h1>我的购物车</h1>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="10" /> 苹果  10元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="20"/> 香蕉  20元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="30"/> 西瓜  30元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="40"/> 李子  40元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="50"/> 哈密瓜  50元<br/>
    总价格是：<span id="myspan">0元</span>
  </body>
</html>

还有就是复选框的全选和取消操作，这个全选和取消标志可以放在超链接中，也可以放在复选框中，这两种方式都可以，根据就是是否被选中，来对复选框进行选中和取消操作，代码为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>SelectCheckBox.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" language="javascript">
       function selectCheck(obj) {
       var fruits = document.getElementsByName("fruit");
         if(obj.innerText=="全选") {
            for(i = 0; i < fruits.length; i++) {
              fruits[i].checked = true;
            }
         }else {
           for(i = 0; i < fruits.length; i++) {
              fruits[i].checked = false;
            }
         }
       }
       
       function selectCheck2() {
         if(myselect.checked) {
            for(i = 0; i < fruits.length; i++) {
              fruits[i].checked = true;
            }
         }else {
            for(i = 0; i < fruits.length; i++) {
              fruits[i].checked = false;
            }
         }
       }
    </script>
  </head>
  
  <body>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="10" /> 苹果  10元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="20"/> 香蕉  20元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="30"/> 西瓜  30元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="40"/> 李子  40元<br/>
    <input type="checkbox" name="fruit" οnclick="shop(this)" value="50"/> 哈密瓜  50元<br/>
    <a href="#" οnclick="selectCheck(this)">全选</a>
    <a href="#" οnclick="selectCheck(this)">取消</a><br/>
    <input type="checkbox" id="myselect" onclice="selectCheck2()"/>是否全选
  </body>
</html>

再有就是js中的form对象，可以获得页面上的全部表单。获得表单中的内容有两种方式，可以直接通过变量加下标获得，也可以用变量点item加下标获得，下标为所对应的页面上的表单。代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Form1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" language="javascript">
      function test() {
         var allforms = document.forms;
         //window.alert(allforms[0].username.value);
         window.alert(allforms.item(0).username.value);
      }
    </script>
  </head>
  
  <body>
   <h1>个人信息</h1>
   <form action="">
     U:<input type="text" name="username"/><br/>
     P:<input type="password" name="pwd"/><br/>
     <input type="submit" value="提交"/>
   </form>
   
   <h1>兴趣爱好</h1>
   <form action="">
     爱好1:<input type="text" name="hobby1"/><br/>
     爱好2:<input type="password" name="hobby2"/><br/>
     <input type="submit" value="提交"/>
   </form>
   <input type="button" value="testing" οnclick="test()"/>
  </body>
</html>