js原生操作select、radio 、checkbox

CoorChice 發(fā)布于2019-08-01 17:18 / 2721人閱讀

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

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選中的下標(biāo)來獲取value獲取
         */
        var selectValue = selectObj.value;
        var selectValue_2 = selectObj.options[index].value;
        /**
         * 獲取選中文本值
         * 通過select選中的下標(biāo)來獲取選中文本值
         */
        var selectText = selectObj.options[index].text;
        /**
         * 設(shè)置select選中項
         * 知道options的value值或者下標(biāo)或者文本值
         * 下面代碼只列出根據(jù)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的下標(biāo)，可通過循環(huán)判斷出塞選出想要的option
         * 注意：如果select沒有找到要刪除option的下標(biāo)，select將保持不變，控制臺不會報錯

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

radio常見操作

        /**
         * radio常見操作
         * document.querySelectorAll(".class、#id")與document.getElementsByName("name值")能達(dá)到一樣的效果，代碼將用前者造輪子
         * 缺點：操作需要循環(huán)去定位然后在操作
         *
         */
        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;//設(shè)置取消選中
            }else{
               //radioObj[i].checked = true;//設(shè)置選中
            }
        }

CheckBox常見操作

       /**
         * checkbox常見操作
         * document.querySelectorAll(".class、#id")與document.getElementsByName("name值")能達(dá)到一樣的效果，代碼將用前者造輪子
         * 缺點：操作需要循環(huán)去定位然后在操作
         * 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;//設(shè)置取消選中
            }else{
                checkboxObj[i].checked = true;//設(shè)置選中
            }
        }