整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          javascript之document.getEle

          javascript之document.getElementsByName實現復選框全選和全不選

          家在好多購物網站買東西的時候購物車常常有一個功能就是全選和全不選的功

          能,那么這個功能用javascript是怎么實現的呢,其實呢很簡單,接下來道哥就

          來給大家分享一下這個小功能。

          HTML代碼塊如下

          <body>
          全選<input type="checkbox" id="all" onclick="checkAll()"/><br/>
          <input type="checkbox" name="a" />
          <input type="checkbox" name="a" />
          <input type="checkbox" name="a" />
          <input type="checkbox" name="a" />
          <input type="checkbox" name="a" />
          <input type="checkbox" name="a" />
          <br/>
          <input type="button" value="必須選擇三個以上" onclick="f()"/>
          </body>
          

          javascript代碼如下

          <script type="text/javascript">
          function checkAll()
          {
          //第一步:根據ID找對象 (參照物)
          var a=document.getElementById("all");
          //第二步:找一堆小弟
          var obj=document.getElementsByName("a");
          //第三步:現在我們將小弟的checked屬性設置成與參照物一樣
          for(var i=0; i<obj.length;i++)
          {
          //第四步;
          //循環將obj對象里面的每一個元素的checked屬性設置成與a一樣
          obj[i].checked=a.checked;
          }
          }
          function f()
          {
          //根據name找對象 返回對象數組
          var obj=document.getElementsByName("a");
          //定義一個計數器
          var count=0;
          //循環對象數組
          for(var i=0;i<obj.length;i++)
          {
          //判斷是否被選擇
          if(obj[i].checked)
          {
          count++
          }
          }
          //判斷是否符合要求
          if(count <3)
          {
          alert("必須選擇至少3項");
          }
          }
          </script>
          

          效果截圖

          同于服務器端腳本語言,例如php與ASP,Javascript是客戶端腳本語言,也就是說JavaScript是在用戶的瀏覽器上運行,不需要服務器的支持而可以獨立運行。所以在早期程序員比較青睞于JavaScript以減少對服務器的負擔,而與此同時也帶來另一個問題:安全性。而隨著服務器的強壯,雖然程序員更喜歡運行于服務端的腳本以保證安全,但JavaScript仍然以其跨平臺、容易上手等優勢大行其道。

          Web前端教程

          復選框的全選和全不選

          需求分析

          商品分類界面中,當我們點擊全選框的時候,我們希望選中所有的商品,當我們取消掉的時候,我們希望不選中所有的商品

          技術分析

          checked="checked"選擇復選框

          事件:onclick點擊事件

          getElementsByTagName:返回包含帶有指定標簽名稱的所有元素的節點列表(集合/節點數組)。

          getElementsByName:返回包含帶有指定類名的所有元素的節點列表。

          步驟分析

          全選和全部選步驟分析:

            1.確定事件:onclick單機事件

            2.事件觸發函數:checkAll()

            3.函數要去做一些事情:

            獲得當前第一個checkbox的狀態

            獲得所有分類項的checkbox

            修改每一個checkbox的狀態

          代碼實現

            <!DOCTYPEhtml>

            <html>

             <head>

             <metacharset="UTF-8">

             <title></title>

             <!--

             1.確定事件:文檔加載完成onload

             2.事件要觸發函數:init()

             3.函數:操作頁面的元素

             要操作表格中每一行

             動態的修改行的背景顏色

             -->

             <script>

             functioninit(){

             //得到表格

             vartab=document.getElementById("tab");

             //得到表格中每一行

             varrows=tab.rows;

             //便利所有的行,然后根據奇數偶數

             for(vari=1;i<rows.length;i++){

             varrow=rows[i];//得到其中的某一行

             if(i%2==0){

             row.bgColor="yellow";

             }else{

             row.bgColor="red"

             }

             }

             }  

             /*

          全選和全部選步驟分析:

             1.確定事件:onclick單機事件

             2.事件觸發函數:checkAll()

             3.函數要去做一些事情:

             獲得當前第一個checkbox的狀態

             獲得所有分類項的checkbox

             修改每一個checkbox的狀態

             */

             functioncheckAll(){

            // 獲得當前第一個checkbox的狀態

             varcheck1=document.getElementById("check1");

             //得到當前checked狀態

             varchecked=check1.checked;

            // 獲得所有分類項的checkbox

            // varchecks=document.getElementsByTagName("input");

             varchecks=document.getElementsByName("checkone");

            // alert(checks.length);

             for(vari=0;i<checks.length;i++){

            // 修改每一個checkbox的狀態

             varcheckone=checks[i];

             checkone.checked=checked;

             }

             }

             </script>

             </head>

             <bodyonload="init()">

             <tableborder="1px"width="600px"id="tab">

             <tr>

             <td>

             <inputtype="checkbox"onclick="checkAll()"id="check1"/>

             </td>

             <td>分類ID</td>

             <td>分類名稱</td>

             <td>分類商品</td>

             <td>分類描述</td>

             <td>操作</td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>1</td>

             <td>手機數碼</td>

             <td>華為,小米,尼康</td>

             <td>黑馬數碼產品質量最好</td>

             <td>

             <ahref="#">修改</a>|<ahref="#">刪除</a>

             </td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>2</td>

             <td>成人用品</td>

             <td>充氣的</td>

             <td>這里面的充氣電動硅膠的</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>3</td>

             <td>電腦辦公</td>

             <td>聯想,小米</td>

             <td>筆記本特賣</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>4</td>

             <td>饞嘴零食</td>

             <td>辣椒,麻花,黃瓜</td>

             <td>年貨</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             <tr>

             <td>

             <inputtype="checkbox"name="checkone"/>

             </td>

             <td>5</td>

             <td>床上用品</td>

             <td>床單,被套,四件套</td>

             <td>都是套子</td>

             <td><ahref="#">修改</a>|<ahref="#">刪除</a></td>

             </tr>

             </table>

             </body>

            </html>

          JavaScript是一種腳本語言,其源代碼在發往客戶端運行之前不需經過編譯,而是將文本格式的字符代碼發送給瀏覽器由瀏覽器解釋運行。解釋語言的弱點是安全性較差,而且在JavaScript中,如果一條運行不了,那么下面的語言也無法運行。而且由于每次重新加載都會重新解譯,加載后,有些代碼會延遲至運行時才解譯,甚至會多次解譯,所以速度較慢。

          以上是酷仔今日整理的“前端教程:使用JavaScript完成復選框的全選和全不”一文,希望為正在學習Web前端的同學提供參考。

          制表單中的單選按鈕

          
          <html>
          <head>
          <title>單選項</title>
          <style>
          <!--
          form{
          padding:0px; margin:0px;
          font:14px Arial;
          }
          p{
          padding:2px; margin:0px;
          }
          -->
          </style>
          <script language="javascript">
          function getChoice(){
              var oForm=document.forms["myForm1"];
              var aChoices=oForm.camera;
              for(i=0;i<aChoices.length;i++) //遍歷整個單選項表
              if(aChoices[i].checked) //如果發現了被選中項則退出
              break;
              alert("您使用的相機品牌是:"+aChoices[i].value);
          }
          function setChoice(iNum){
              var oForm=document.forms["myForm1"]; //獲取表單的節點
              oForm.camera[iNum].checked=true; //設置某選項被選中
          }
          </script>
          </head>
          <body>
          <form method="post" name="myForm1" action="addInfo.php">
          您使用的相機品牌:
          <p>
          <input type="radio" name="camera" id="canon" value="Canon">
          <label for="canon">Canon</label>
          </p>
          <p>
          <input type="radio" name="camera" id="nikon" value="Nikon">
          <label for="nikon">Nikon</label>
          </p>
          <p>
          <input type="radio" name="camera" id="sony" value="Sony" checked>
          <label for="sony">Sony</label>
          </p>
          <p>
          <input type="radio" name="camera" id="olympus" value="Olympus">
          <label for="olympus">Olympus</label>
          </p>
          <p>
          <input type="radio" name="camera" id="samsung" value="Samsung">
          <label for="samsung">Samsung</label>
          </p>
          <p>
          <input type="radio" name="camera" id="pentax" value="Pentax">
          <label for="pentax">Pentax</label>
          </p>
          <p>
          <input type="radio" name="camera" id="others" value="其它">
          <label for="others">others</label>
          </p>
          <p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn"></p>
          <p><input type="button" value="檢測選中對象" onclick="getChoice();">
          <input type="button" value="設置為Canon" onclick="setChoice(0);"></p>
          </form>
          </body>
          </html>



          設置復選框(全選、全不選、反選):


          主站蜘蛛池模板: 国产福利日本一区二区三区| 无码人妻精品一区二区三区66 | jizz免费一区二区三区| 无码人妻久久一区二区三区蜜桃 | 久久精品一区二区东京热| 国产第一区二区三区在线观看| 久久精品一区二区三区资源网| 精品一区二区三区在线观看l| 亚洲一区影音先锋色资源| 亚洲av午夜福利精品一区人妖| 日韩一本之道一区中文字幕| 日韩一区二区三区在线精品| 高清一区二区三区| 一区二区在线视频免费观看| 国产在线精品一区二区夜色| 波多野结衣的AV一区二区三区| 国产精品第一区第27页| 国产内射在线激情一区| 91久久精品一区二区| 亚洲日韩AV无码一区二区三区人| 99精品国产一区二区三区2021| 中文字幕无线码一区二区 | 国产成人AV一区二区三区无码| 精品一区二区三区在线视频| 中文字幕在线一区二区在线 | 国产精品99无码一区二区| 真实国产乱子伦精品一区二区三区| 日本免费精品一区二区三区| 精品日韩在线视频一区二区三区| 久久久久99人妻一区二区三区| 伊人无码精品久久一区二区| 一区二区三区免费高清视频| 亚洲国产精品一区第二页| 女女同性一区二区三区四区| 丝袜无码一区二区三区| 欧洲精品码一区二区三区| 久久国产精品一区二区| 卡通动漫中文字幕第一区| 精品无码人妻一区二区三区品| 日本在线观看一区二区三区| 任你躁国语自产一区在|