js原生操作select、radio 、checkbox

CoorChice 发布于2019-08-01 17:18 / 2691人阅读

摘要：常见操作常见操作常见操作常见操作代码下拉框单选框多选框代码常见操作常见操作获取选中值第一种通过对象获取第二种通过选中的下标来获取获取获取选中文本值通过选中的下标来获取选中文本值设置选中项知道的值或者下标或者文本值下面代码只列出根据来选中获取

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操作

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51086.html

js原生操作select、radio 、checkbox

摘要：常见操作常见操作常见操作常见操作代码下拉框单选框多选框代码常见操作常见操作获取选中值第一种通过对象获取第二种通过选中的下标来获取获取获取选中文本值通过选中的下标来获取选中文本值设置选中项知道的值或者下标或者文本值下面代码只列出根据来选中获取 select、radio 、checkbox常见操作 select常见操作 radio常见操作 select常见操作 html代码 ...

HitenDev 2019-08-20 18:29 评论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