日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁(yè) >

js原生操作select、radio 、checkbox

發(fā)布時(shí)間:2025/3/20 26 豆豆
生活随笔 收集整理的這篇文章主要介紹了 js原生操作select、radio 、checkbox 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

select、radio 、checkbox常見操作

  • select常見操作

  • radio常見操作

  • 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對(duì)象.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選中項(xiàng)* 知道options的value值或者下標(biāo)或者文本值* 下面代碼只列出根據(jù)value來選中select*/var setSelect = 'radio';var selectOptions = selectObj.options;//獲取select下所有的optionfor(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需要獲得要?jiǎng)h除option的下標(biāo),可通過循環(huán)判斷出塞選出想要的option* 注意:如果select沒有找到要?jiǎng)h除option的下標(biāo),select將保持不變,控制臺(tái)不會(huì)報(bào)錯(cuò)*/var deleteIndex = 0;selectObj.options.remove(deleteIndex);/*** 修改option* 思路:修改option需要獲得要修改option的下標(biāo)* 注意:如果要修改的updateIndex大于select的option長(zhǎng)度,就會(huì)出現(xiàn)空的option* 缺點(diǎn):和刪除option一起用會(huì)保留空的option*/var updateIndex = 2;selectObj.options[updateIndex]=new Option('多行行文本輸入框','textarea');
    • radio常見操作

    /*** radio常見操作* document.querySelectorAll('.class、#id')與document.getElementsByName('name值')能達(dá)到一樣的效果,代碼將用前者造輪子* 缺點(diǎn):操作需要循環(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á)到一樣的效果,代碼將用前者造輪子* 缺點(diǎn):操作需要循環(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è)置選中}}

    總結(jié)

    以上是生活随笔為你收集整理的js原生操作select、radio 、checkbox的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。