js原生操作select、radio 、checkbox

HitenDev 發布于2019-08-20 18:29 / 2028人閱讀

摘要：常見操作常見操作常見操作常見操作代碼下拉框單選框多選框代碼常見操作常見操作獲取選中值第一種通過對象獲取第二種通過選中的下標來獲取獲取獲取選中文本值通過選中的下標來獲取選中文本值設置選中項知道的值或者下標或者文本值下面代碼只列出根據來選中獲取

select、radio 、checkbox常見操作

select常見操作

radio常見操作

select常見操作

html代碼

 
    
        java
        php
        .net
        c++
    
    
        react
        vue
        javascript
        sass
        less

js代碼

select常見操作

        /**
         * select常見操作
         */
        var selectObj  = document.querySelector(".select");
        var index = selectObj.selectedIndex;
        /**
         * 獲取選中value值
         * 第一種通過select對象.value獲取
         * 第二種通過select選中的下標來獲取value獲取
         */
        var selectValue = selectObj.value;
        var selectValue_2 = selectObj.options[index].value;
        /**
         * 獲取選中文本值
         * 通過select選中的下標來獲取選中文本值
         */
        var selectText = selectObj.options[index].text;
        /**
         * 設置select選中項
         * 知道options的value值或者下標或者文本值
         * 下面代碼只列出根據value來選中select
         */
        var setSelect = "radio";
        var selectOptions = selectObj.options;//獲取select下所有的option
        for(var i = 0;i < selectOptions.length;i++){
            //selectOptions[i].text 獲取文本值
            if(selectOptions[i].value == setSelect){
                selectObj[i].setAttribute("selected","selected");
                break;
            }
        }
        /**
         * 添加option
         * 格式：new Option("text(文本值)","value(value值)");
         */
        selectObj.add(new Option("單行文本輸入框","text"));
        /**
         * 刪除option
         * 思路：刪除option需要獲得要刪除option的下標，可通過循環判斷出塞選出想要的option
         * 注意：如果select沒有找到要刪除option的下標，select將保持不變，控制臺不會報錯

         */
        var deleteIndex = 0;
        selectObj.options.remove(deleteIndex);
        /**
         * 修改option
         * 思路：修改option需要獲得要修改option的下標
         * 注意：如果要修改的updateIndex大于select的option長度，就會出現空的option
         * 缺點：和刪除option一起用會保留空的option
         */
        var updateIndex = 2;
        selectObj.options[updateIndex]=new Option("多行行文本輸入框","textarea");

radio常見操作

        /**
         * radio常見操作
         * document.querySelectorAll(".class、#id")與document.getElementsByName("name值")能達到一樣的效果，代碼將用前者造輪子
         * 缺點：操作需要循環去定位然后在操作
         *
         */
        var radioObj = document.querySelectorAll(".radio");
        for(var i = 0;i < radioObj.length;i++){
            if(radioObj[i].checked == true){
                console.log(radioObj[i].value);//獲取選中的值
                radioObj[i].checked = false;//設置取消選中
            }else{
               //radioObj[i].checked = true;//設置選中
            }
        }

CheckBox常見操作

       /**
         * checkbox常見操作
         * document.querySelectorAll(".class、#id")與document.getElementsByName("name值")能達到一樣的效果，代碼將用前者造輪子
         * 缺點：操作需要循環去定位然后在操作
         * checkbox常見操作與radio常見操作都一樣
         */
        var checkboxObj = document.querySelectorAll(".checkbox");
        for(var i = 0;i < checkboxObj.length;i++){
            if(checkboxObj[i].checked == true){
                console.log(checkboxObj[i].value);//獲取選中的值
                checkboxObj[i].checked = false;//設置取消選中
            }else{
                checkboxObj[i].checked = true;//設置選中
            }
        }

GPU云服務器云服務器 JS操作select jQuery操作checkbox jquery操作radio select_option操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84592.html

js原生操作select、radio 、checkbox

摘要：常見操作常見操作常見操作常見操作代碼下拉框單選框多選框代碼常見操作常見操作獲取選中值第一種通過對象獲取第二種通過選中的下標來獲取獲取獲取選中文本值通過選中的下標來獲取選中文本值設置選中項知道的值或者下標或者文本值下面代碼只列出根據來選中獲取 select、radio 、checkbox常見操作 select常見操作 radio常見操作 select常見操作 html代碼 ...

CoorChice 2019-08-01 17:18 評論0 收藏0
修改radio、checkbox和select默認樣式

摘要：現在前端頁面效果日益豐富，默認的組件樣式顯然已經不能滿足需求。兼容更低版本瀏覽器的樣式修改最后附上演示鏈接修改和默認樣式現在前端頁面效果日益豐富，默認的input組件樣式顯然已經不能滿足需求。趁著這次開發的頁面中有這方面的需求，在這里整理一下修改radio、checkbox、select的方法。 radio and checkbox 修改radio的默認樣式有兩種常用的方法純CSS...

mumumu 2019-08-21 10:50 評論0 收藏0
總結：如何修改美化radio、checkbox的默認樣式

摘要：現在前端頁面效果日益豐富，默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。現在前端頁面效果日益豐富，默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改radio、CheckBox樣式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 評論0 收藏0
總結：如何修改美化radio、checkbox的默認樣式

摘要：現在前端頁面效果日益豐富，默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。現在前端頁面效果日益豐富，默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改radio、CheckBox樣式的方法。原理：大致原理都是使用原生的checkbox或inp...

Anshiii 2019-08-29 17:26 評論0 收藏0