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ò)，歡迎將生活随笔推薦給好友。