html:
<input type="text" id="the_text">
<button type="button" id="the_btn">取得值</button>
JavaScript:
var el_the_btn = document.getElementById("the_btn"); // 取得 button 元素
el_the_btn.addEventListener("click", function(){ // button 的 click 事件綁定
var el_the_text = document.getElementById("the_text"); // 取得欄位元素
console.log(el_the_text.value); // 取得值
});
例:
html:
<textarea id="the_textarea"></textarea>
<button type="button" id="the_btn">取得值</button>
JavaScript:
var el_the_btn = document.getElementById("the_btn");
el_the_btn.addEventListener("click", function(){ // button 的 click 事件綁定
var el_the_textarea = document.getElementById("the_textarea");
console.log(el_the_textarea.value);
});
例:
html:
<select id="the_select">
<option value="1">選項一</option>
<option value="2">選項二</option>
</select>
<button type="button" id="the_btn">取得值</button>
JavaScript:
var el_the_btn = document.getElementById("the_btn"); // 取得 button 欄位
el_the_btn.addEventListener("click", function(){ // button 的 click 事件綁定
var el_select = document.getElementById("the_select"); // 取得 select 下拉選單
console.log(el_select.value); // 取得 select 目前所選的值
console.log(el_select.options[el_select.selectedIndex].text); // 取得 select 目前所選的文字
});
例:
html:
<input type="radio" name="food_type" value="1" checked> 葷
<input type="radio" name="food_type" value="2"> 素
<button type="button" id="the_btn">取得值</button>
JavaScript:
var el_the_btn = document.getElementById("the_btn");
el_the_btn.addEventListener("click", function(){
var food_type = document.querySelector("input[name=food_type]:checked");
console.log(food_type.value);
});
例:
html:
<input type="checkbox" class="habits" value="1"> 興趣1
<input type="checkbox" class="habits" value="2"> 興趣2
<input type="checkbox" class="habits" value="3"> 興趣3
<button type="button" id="the_btn">取得值</button>
JavaScript:
var el_the_btn = document.getElementById("the_btn");
el_the_btn.addEventListener("click", function(){
var all_checked = document.querySelectorAll('.habits:checked'); // 取得有勾選的所有元素
var all_value = []; // 空陣列,預計用來存放每個有勾選的值
all_checked.forEach(function(item, index){ // 跑迴圈
all_value.push(item.value);
});
console.log(all_value);
});
例:
提供 html:
<input type="checkbox" id="check_all"><label for="check_all">全選</label>
<hr>
<input type="checkbox" class="item" id="option1"> <label for="option1">選項一</label>
<input type="checkbox" class="item" id="option2"> <label for="option2">選項二</label>
<input type="checkbox" class="item" id="option3"> <label for="option3">選項三</label>
撰寫 JS,完成如下影片示意:
參考作法:
html:
<input type="text" class="the_text" id="the_text">
「設定值」的語法:
var the_text = document.getElementById("the_text");
// 以下三種方式皆可
the_text.value = "測試"; // 這個較常見,但不會改變到標籤上的屬性
//the_text.setAttribute("value", "測試二");
//the_text.defaultValue = "測試三"; // 極少見
範例:
type 等於 password、hidden 等類似一般文字框,操作都一樣。
html:
<textarea id="the_textarea"></textarea>
<button type="button" id="the_btn">按鈕</button>
JS:
如果要斷行,要用 \n
。
var the_textarea = document.getElementById("the_textarea");
the_textarea.innerHTML = "這是文字\n新的一行";
範例:
html:
<select name="the_select" id="the_select">
<option value="a">選項一</option>
<option value="b">選項二</option>
<option value="c">選項三</option>
</select>
JS:
var the_select = document.getElementById("the_select");
the_select.value = "c"; // 設定值
範例:
html:
<input type="checkbox" id="the_checkbox">
<button type="button" id="the_btn">取文字</button>
JS:
var the_checkbox = document.getElementById("the_checkbox");
if(the_checkbox.checked){
alert("有勾選");
}else{
alert("沒有勾選");
}
範例:
JS:
var the_checkbox = document.getElementById("the_checkbox");
if(the_checkbox.checked){ // 判斷目前有無勾選
the_checkbox.checked = false; // 不勾選
}else{
the_checkbox.checked = true; // 勾選
}
範例:
html:
<input type="radio" class="food_type" name="food_type" id="check1" value="1" checked>
<input type="radio" class="food_type" name="food_type" id="check2" value="2">
<input type="radio" class="food_type" name="food_type" id="check3" value="3">
<button type="button" id="the_btn">取文字</button>
JS:
var food_type = document.querySelectorAll("input[name='food_type']");
food_type.forEach(function(item, i){ // 執行迴圈
console.log(item.checked); // 該項是否有勾選
});
範例:
JS:
var food_type = document.getElementById("check3");
food_type.checked = true;
範例: