久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質的職業(yè)教育機構

        手機站
        千鋒教育

        千鋒學習站 | 隨時隨地免費學

        千鋒教育

        掃一掃進入千鋒手機站

        領取全套視頻
        千鋒教育

        關注千鋒學習站小程序
        隨時隨地免費學習課程

        當前位置:首頁  >  技術干貨  > JS多選框選中與取消解析

        JS多選框選中與取消解析

        來源:千鋒教育
        發(fā)布人:xqq
        時間: 2023-11-22 08:27:09 1700612829

        一、js多選框選中與取消

        在網頁開發(fā)中,常用的表單控件之一是多選框。一般情況下,我們使用鼠標點擊多選框來進行選中和取消選中操作。但是,在某些情境下,我們需要通過js代碼來進行多選框的選中和取消。下面是示例代碼:

        
          
          
          
        
          
        

        以上代碼中,我們使用了getElementById方法獲取了三個多選框的引用,然后在js代碼中對其進行了選中和取消選中操作。checkbox.checked屬性代表該多選框是否被選中,true代表選中,false代表未選中。

        二、js多選框默認選中事件

        在實際開發(fā)中,我們可能需要對多選框進行默認選中操作。在html中,我們可以通過在多選框的input標簽中添加checked屬性來進行默認選中。下面是示例代碼:

        
          
          
          
        
          
        

        上面代碼中,我們在checkbox1和checkbox3多選框的input標簽中添加了checked屬性,表示這兩個多選框默認選中。通過js代碼獲取到多選框引用后,對其進行選中和取消選中操作,與前面示例代碼中一致。

        三、js獲取多選框選中的值

        在表單提交時,我們可能需要獲取多選框選中的值,這個時候我們需要用到js。下面是示例代碼:

        
           
          
           
          
           
          
        
          
        
          
        

        上面代碼中,我們通過getElementsByTagName方法獲取了name屬性為"fruit"的多選框,并使用for循環(huán)來遍歷每個多選框,如果該多選框被選中,則將其value值加入到result數組中。最后使用alert函數輸出選中結果。

        四、js控制復選框取消選中

        我們可能需要在某些情況下,控制某個多選框不被選中。下面是示例代碼:

        
          
          
          
        
          
        
          
        

        上面代碼中,我們使用getElementById方法獲取了checkbox2的引用,并在js代碼中對其進行了取消選中的操作。

        五、js單選框取消選中

        與多選框不同,單選框一次只能選中一個選項,在選中一個選項之后,其他選項應該自動取消選中。下面是示例代碼:

        
          
          
          
          
        
          
        

        上面代碼中,我們使用getElementsByName方法獲取了name屬性為"gender"的兩個單選框,然后使用for循環(huán)遍歷每個單選框。在遍歷的過程中,我們給每個單選框綁定了一個onclick事件,當該單選框被點擊時,使用for循環(huán)遍歷除該單選框之外的其他單選框,并將其取消選中。

        六、js獲取多選框是否選中

        在某些情況下,我們需要通過js代碼來獲取多選框的選中狀態(tài),判斷其是否被選中。下面是示例代碼:

        
          
          
          
        
          
        
          
        

        上面代碼中,我們使用getElementById方法獲取了三個多選框的引用,并在js代碼中通過checkbox.checked屬性來獲取多選框的狀態(tài)。

        七、js設置多選框不選中

        有時候,我們需要通過js代碼來將多選框恢復到未選中狀態(tài)。下面是示例代碼:

        
          
          
          
        
          
        
          
        

        上面代碼中,我們使用getElementsByName方法獲取了name屬性為"checkbox"的所有多選框,并使用for循環(huán)遍歷每個多選框,將其設置為未選中狀態(tài)。

        八、js取消checkbox選中

        除了多選框和單選框,我們還有一種常用的表單控件是checkbox,它也需要經常進行選中和取消選中的操作。下面是示例代碼:

        
          
        
          
        
          
        

        上面代碼中,我們使用getElementById方法獲取了checkbox的引用,并在js代碼中將其設置為未選中狀態(tài)。

        九、js取消radio選中

        和多選框一樣,我們也需要對單選框進行取消選中操作。下面是示例代碼:

        
          
          
          
          
        
          
        
          
        

        上面代碼中,我們使用getElementsByName方法獲取了name屬性為"radio"的所有單選框,并使用for循環(huán)遍歷每個單選框,將其設置為未選中狀態(tài)。

        聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
        10年以上業(yè)內強師集結,手把手帶你蛻變精英
        請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
        免費領取
        今日已有369人領取成功
        劉同學 138****2860 剛剛成功領取
        王同學 131****2015 剛剛成功領取
        張同學 133****4652 剛剛成功領取
        李同學 135****8607 剛剛成功領取
        楊同學 132****5667 剛剛成功領取
        岳同學 134****6652 剛剛成功領取
        梁同學 157****2950 剛剛成功領取
        劉同學 189****1015 剛剛成功領取
        張同學 155****4678 剛剛成功領取
        鄒同學 139****2907 剛剛成功領取
        董同學 138****2867 剛剛成功領取
        周同學 136****3602 剛剛成功領取
        相關推薦HOT
        凌云县| 岫岩| 青田县| 新乡市| 柳江县| 长岭县| 古丈县| 漳浦县| 田东县| 龙泉市| 新蔡县| 怀安县| 临猗县| 正蓝旗| 都兰县| 江西省| 德阳市| 凌源市| 桐梓县| 监利县| 高雄县| 囊谦县| 海林市| 上杭县| 靖西县| 绥中县| 平南县| 张掖市| 冕宁县| 红河县| 湖南省| 东乡| 襄樊市| 汉中市| 海林市| 新田县| 新巴尔虎左旗| 宁城县| 雷州市| 秦安县| 小金县|