溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下JS如何獲取表單中的元素和取值的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始
<body>
<!--
獲取表單
1、document.表單名稱
2、document.getElementById(表單 id);
3、document.forms[表單名稱]
4、document.forms[索引]; //從 0 開始
-->
<form id='myform' name="myform" action="" method="post"></form>
<form id='myform2' name="myform2" action="" method="post"></form>
<script type="text/javascript">
//1、document.表單名稱
var form = document.myform;
console.log(form);
//2、document.getElementById(表單 id);
var myform2 = document.getElementById("myform2");
console.log(myform2);
//3、document.forms[表單名稱]
var forms = document.forms;
console.log(forms);
console.log(forms['myform2']);
//4、document.forms[索引]; //從 0 開始
console.log(forms[0]);
</script>
</body> <body>
<!--
獲取元素的值
獲取表單元素的值
表單元素節點.value; 取值
表單元素節點.value = "值"; 設置值
文本框，密碼框，單選，多選
獲取非表單元素的內容
元素節點.innerHtml = "值"; 設置值
元素節點.innerHtml; 取值
獲取input元素
1)、通過 id 獲取： document.getElementById(元素 id);
2)、通過 form.名稱 形式獲取: myform.元素名稱; name屬性值
3)、通過 name 獲取 數組 :document.getElementsByName(name屬性值)[索引] // 從0開始
4)、通過 tagName 數組 :document.getElementsByTagName('input')[索引] // 從0開始
獲取單選按鈕
前提：將一組單選按鈕設置相同的name屬性值
(1)獲取單選按鈕組：
document.getElementsByName("name屬性值");
(2)遍歷每個單選按鈕，并查看單選按鈕元素的checked屬性
若屬性值為true表示被選中，否則未被選中
選中狀態設定： checked='checked' 或 checked='true' 或 checked
未選中狀態設定： 沒有checked屬性 或 checked='false'
多選框
前提：設置一組多選框為相同name屬性值
(1)獲取多選按鈕組：
document.getElementsByName("name屬性值");
(2)遍歷每個多選按鈕，并查看多選按鈕元素的checked屬性
若屬性值為true表示被選中，否則未被選中
選中狀態設定： checked='checked' 或 checked='true' 或 checked
未選中狀態設定： 沒有checked屬性 或 checked='false'
獲取下拉選項
1）獲取 select 對象：
var ufrom = document.getElementById("ufrom");
2）獲取選中項的索引：
var idx = ufrom.selectedIndex;
3）獲取選中項 options 的 value屬性值：
var val = ufrom.options[idx].value;
注意：當通過options獲取選中項的value屬性值時，
若沒有value屬性，則取option標簽的內容
若存在value屬性，則取value屬性的值
4）獲取選中項 options 的 text：
var txt = ufrom.options[idx].text;
選中狀態設定：selected='selected'、selected=true、selected
未選中狀態設定：不設selected屬性
-->
<form id='myform' name="myform1" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs"/><br />
密碼:<input type="password" id="upwd" name="upwd" value="1234"/><br />
<input type="hidden" id="uno" name="uno" value="隱藏域" />
個人說明:<textarea name="intro"></textarea>
<button type="button" onclick="getTxt();" >獲取元素內容</button>
</form>
<!-- 操作單選 -->
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
<button type="button" onclick="getRadio();" >獲取單選內容</button>
</form>
<!-- 操作多選 -->
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="checkbox" name="hobby" value="1" /> 1
<input type="checkbox" name="hobby" value="2" /> 2
<input type="checkbox" name="hobby" value="3" /> 3
<button type="button" onclick="getCheckbox();" >獲取多選內容</button>
</form>
<!-- 獲取下拉框 -->
<form id='myform' name="myform9" action="" method="">
來自:
<select id="ufrom" name="ufrom">
<option value="-1" >請選擇</option>
<option value="0" selected="selected">北京</option>
<option value="1">上海</option>
</select><br />
<button type="button" onclick="getSelect();" >獲取多選內容</button>
</form>
<script type="text/javascript">
//獲取元素內容
function getTxt(){
// 1)、通過 id 獲取：document.getElementById(元素 id);
var uname = document.getElementById("uname");
console.log(uname.value);
//2)、通過 form.名稱形式獲取: myform.元素名稱; name屬性值
var upwd = document.myform1.upwd;
console.log(upwd);
console.log(upwd.value);
//3)、通過 name 獲取 :document.getElementsByName(name屬性值)[索引] // 從0開始
var hid = document.getElementsByName("uno")[0];
console.log(hid.value);
// 4)、通過 tagName 數組 :document.getElementsByTagName('input')[索引] // 從0開始
var texta = document.getElementsByTagName("textarea")[0];
console.log(texta.value);
}
//獲取單選按鈕中選中項
function getRadio(){
//獲取所有單選
var rads = document.getElementsByName("rad");
//遍歷每個單選
for(var i = 0; i < rads.length; i++){
if(rads[i].checked){
console.log(rads[i].value);
}
}
}
//獲取多選按鈕中選中項
function getCheckbox(){
//獲取所有多選
var hobbys = document.getElementsByName("hobby");
//遍歷每個多選
var str ="";
for(var i = 0; i < hobbys.length; i++){
if(hobbys[i].checked){
str += hobbys[i].value + ",";
}
}
console.log(str.substring(0,str.length-1));
}
//獲取下拉選項
function getSelect(){
//獲取下拉框
var select = document.getElementsByName("ufrom")[0];
//獲取下拉框的選項
var options = select.options;
//獲取下拉框選中索引
var index = select.selectedIndex;
//獲取選中項
console.log(options[index]);
//獲取選中項的值
console.log(select.value);
}
</script>
</body>以上就是“JS如何獲取表單中的元素和取值”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
