表單元素的屬性 · JavaScript

## 概述 value用于大部分表單元素的內容獲取(option除外). type可以獲取input標簽的類型(輸入框或復選框等). disabled 禁用屬性. checked復選框選中屬性. selected下拉菜單選中屬性. ## 說明當html中的標簽的屬性,只有一個值的時候,它的屬性值是布爾類型的.只有上面列的后三個. ``` <body> <input type="button" value="禁用" id="btn"> <input type="button" value="啟用" id="btn1"> <input type="text" name="" id="txt"> <script> var btn = document.getElementById('btn'); btn.onclick = function () { txt = document.getElementById('txt'); txt.disabled = true; } var btn1 = document.getElementById('btn1'); btn1.onclick = function () { txt = document.getElementById('txt'); txt.value = 'hello'; } </script> ``` ## 瀏覽器打開后給所有input賦值,點擊按鈕獲取所有值并用|分割. ``` <body> <input type="button" value="獲取" id="btn"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> <script> var inputs = document.getElementsByTagName('input'); for (let i = 0; i < inputs.length; i++) { if (inputs[i].type === 'text') { inputs[i].value = i; } } var btn = document.getElementById('btn'); var str = ''; btn.onclick = function () { for (let i = 0; i < inputs.length; i++) { if (inputs[i].type === 'text') { str += inputs[i].value + '|'; } } console.log(str.substr(str,str.length-1)); } </script> ``` 優化,因為字符串是不可變的.所以直接大量拼接很占用性能. ``` btn.onclick = function () { for (let i = 0; i < inputs.length; i++) { if (inputs[i].type === 'text') { arr.push(inputs[i].value) } } console.log(arr.join('|')); } ```