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對象.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下所有的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需要獲得要刪除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;//設置選中}}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。