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;//设置选中
            }
        }