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

来源：互联网发布：厨房重油污知乎编辑：程序博客网时间：2024/05/16 09:54

网页中含有复选框时，可能含有几种操作，一种是全选和取消操作，还有一种就是根据你选中的内容在页面上有所显示。先来看看后一种，例子是计算选中的水果的价格，这样复选框的内容为每种水果和它对应的价格，而在复选框标签中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" onclick="shop(this)" value="10" /> 苹果  10元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="20"/> 香蕉  20元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="30"/> 西瓜  30元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="40"/> 李子  40元<br/>    <input type="checkbox" name="fruit" onclick="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" onclick="shop(this)" value="10" /> 苹果  10元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="20"/> 香蕉  20元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="30"/> 西瓜  30元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="40"/> 李子  40元<br/>    <input type="checkbox" name="fruit" onclick="shop(this)" value="50"/> 哈密瓜  50元<br/>    <a href="#" onclick="selectCheck(this)">全选</a>    <a href="#" onclick="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" onclick="test()"/>  </body></html>