js原生操做select、radio 、checkbox

select、radio 、checkbox常見操做

1. select常見操做

2. radio常見操做

3. select常見操做

html代碼

<select class="select">
        <option value="select" selected="selected">下拉框</option>
        <option value="radio">單選框</option>
        <option value="checkbox">多選框</option>
    </select>
    <div class="container">
        <input class="radio" name="programinglanguage" type="radio" value="java" />java
        <input class="radio" name="programinglanguage" type="radio" value="php" />php
        <input class="radio" name="programinglanguage" type="radio" checked="checked"  value=".net" />.net
        <input class="radio" name="programinglanguage" type="radio" value="c++" />c++
    </div>
    <div class="container">
        <input class="checkbox" name="frontEnd" type="checkbox" checked="checked" value="react" />react
        <input class="checkbox" name="frontEnd" type="checkbox" value="vue" />vue
        <input class="checkbox" name="frontEnd" type="checkbox" value="javascript" />javascript
        <input class="checkbox" name="frontEnd" type="checkbox" value="sass" />sass
        <input class="checkbox" name="frontEnd" type="checkbox" value="less" />less
    </div>

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;//設置選中
            }
        }