最近在測試 Selenium 時需要撰寫含有 HTML 表單選項元素 (radio, checkbox, select) 的測試網頁, 這種前端任務使用 jQuery 最方便, 於是我想趁這機會把所有表單元素的 jQuery 取值與設定方式重新整理, 以後要參考時也方便, 雖然之前有稍微整理過, 但那時沒有提供測試範例, 參考 :
HTML 的表單元件參考下面這篇 :
1. 文字欄位 (input-text) 與文字區域 (textarea) :
文字欄位是 type 屬性為 text 的 input 元素, 用來輸入單行文字; 而文字區域則是 textarea 元素, 用來輸入多行文字, 用 jQuery 存取其內容都是使用 val() 方法, 有傳參數為 setter (設定內容), 未傳參數為 getter (取得內容), 如下面範例所示 :
此網頁中有一個單行文字欄位 (姓名, id=name), 與一個文字區域 (評論, id=comment), 底下有三個按鈕, 按清除鈕 (id=clear) 會呼叫 val() 並傳入空字串來清除兩個文字輸入欄位的值; 按預設鈕 (id=default) 會呼叫 val() 並傳入預設值字串來設定內容; 按確定鈕 (id=ok) 則會呼叫 val() 不傳入參數來取得兩個文字輸入欄位的值, 並製作顯示字串設定於底下 div 元素 (id=result) 中 :
<form action="" id="poll_form">
<div>
<label for="name">姓名</label>
<input type="text" id="name" value="請輸入姓名">
</div>
<div>
<label for="comment">留言</label>
<textarea id="comment">請輸入留言</textarea>
</div>
<div>
<input type="button" value="清除" id="clear">
<input type="button" value="預設" id="default">
<input type="button" value="確定" id="ok">
</div>
<div id="result"></div>
</form>
<script>
$(document).ready(function(){
$("#clear").click(function(){
$("#name").val(""); # 設值 (清空)
$("#comment").val(""); # 設值 (清空)
});
$("#default").click(function(){
$("#name").val("請輸入姓名"); # 設值
$("#comment").val("請輸入留言"); # 設值
});
$("#ok").click(function(){
var name=$("#name").val(); # 取值
var comment=$("#comment").val(); # 取值
msg="姓名: " + name + "\n" +
"留言: " + comment + "\n";
msg=msg.replace(/\n/g, "<br>");
$("#result").html(msg);
});
});
</script>
結果如下 :
注意, 存取 textarea 元素要用 val() 而非 html(), 雖然它有結尾標籤 </textarea>.
參考 :
2. 單選圓鈕 (input-radio) :
單選圓鈕是 type 屬性為 radio 的 input 元素, 用來從一組選項中選擇其中一個, 但要特別注意的是, 這些 input 元素必須要有相同的 name 屬性值才會有單選的效果, 亦即, 若它們名稱都不同, 則每一個都會變成可被勾選而失去單選的功能.
若要將單選圓鈕群組中的某個選項預設為已勾選有三種作法 :
- <input type="radio" name="idol" id="idol-1" value="金智媛" checked>
- <input type="radio" name="idol" id="idol-1" value="金智媛" checked="checked">
- <input type="radio" name="idol" id="idol-1" value="金智媛" checked="true">
jQuery 提供了 attr() 與 prop() 方法來存取選項的勾選狀態, 但是由於 attr() 對於沒有 checked 屬性的選項會傳回 undefined 使得結果不符預期, 故操控 radio 的勾選最好使用 prop(), 它的設定與取值都一律使用 true 與 false, 不會得到非預期結果, 其用法如下 :
$("#idol-1").prop("checked"); # 取值 : 傳回選項勾選狀態 true/false
$("#idol-1").prop("checked", true); # 設值 : 勾選
$("#idol-1").prop("checked", false); # 設值 : 取消勾選
取得被選取的單選圓鈕物件可使用選擇器 $("input[name='idol']:checked"), 呼叫其 val() 方法則可取得該選項 input 元素之 value 屬性值 :
$("input[name='idol']:checked").val();
注意, 若沒有選項被勾選, 則上式呼叫 val() 會傳回 undefined.
參考 :
測試範例如下 :
此網頁中有一組名為 idol 的 radio 單選圓鈕群組, 其中第三個選項預設已勾選, 底下有三個按鈕, 按 "清除勾選" 鈕會先找出目前被勾選的選項, 然後呼叫 prop("checked", false) 取消勾選. 按 "勾選金智媛" 鈕會勾選第一個選項勾選. 按 "確定" 鈕則會在底下 id=result 的 div 元素中顯示勾選結果.
<form action="" id="form1">
<div>
<p>最喜歡的韓星 :</p>
<input type="radio" value="金智媛" name="idol" id="idol-1">
<label for="idol-1">金智媛</label>
<input type="radio" value="朴恩斌" name="idol" id="idol-2">
<label for="idol-2">朴恩斌</label>
<input type="radio" value="孫藝珍" name="idol" id="idol-3" checked>
<label for="idol-3">孫藝珍</label>
<input type="radio" value="李世榮" name="idol" id="idol-4">
<label for="idol-4">李世榮</label>
<input type="radio" value="金裕貞" name="idol" id="idol-5">
<label for="idol-5">金裕貞</label>
</div>
<div>
<input type="button" value="清除勾選" id="clear">
<input type="button" value="選擇金智媛" id="check_idol_1">
<input type="button" value="確定" id="ok">
</div>
<div id="result"></div>
</form>
<script>
$(document).ready(function(){
$("#clear").click(function(){
$("input[name='idol']:checked").prop("checked", false); # 取消勾選
});
$("#check_idol_1").click(function(){
$("#idol-1").prop("checked", true); # 勾選
});
$("#ok").click(function(){
var idol=$("input[name='idol']:checked").val(); # 取得被勾選選項之值
if (idol==undefined) {idol="未勾選";}
msg="最喜歡的韓星: " + idol;
$("#result").html(msg);
});
});
</script>
勾選後再按 "確定" :
3. 核取方塊 (input-checkbox) :
核取方塊是 type 屬性為 checkbox 的 input 元素, 可在一組選項中選取多個選項 (複選), 與 radio 一樣的是, 這些 input 元素也必須要有相同的 name 屬性值.
若要將核取方塊群組中的某些選項預設為已勾選有三種作法 :
- <input type="checkbox" name="drama" value="淚之女王" checked>
- <input type="checkbox" name="drama" value="淚之女王" checked="checked">
- <input type="checkbox" name="drama" value="淚之女王" checked="true">
jQuery 提供了 attr() 與 prop() 方法來存取選項的勾選狀態, 但是由於 attr() 對於沒有 checked 屬性的選項會傳回 undefined 使得結果不符預期, 故操控 checkbox 的勾選最好使用 prop(), 它的設定與取值都一律使用 true 與 false, 不會得到非預期結果, 其用法如下 :
$("#drama-1").prop("checked"); # 取值 : 傳回選項勾選狀態 true/false
$("#drama-1").prop("checked", true); # 設值 : 勾選
$("#drama-1").prop("checked", false); # 設值 : 取消勾選
因為複選的關係, 取得被選取的核取方塊元素物件之值需要使用一個空陣列來暫存它們的值, 然後用選擇器 $("input[name='drama']:checked") 來選取全部被選取之 input 元素, 要注意的是, 由於被迭代的是 DOM 元素, 因此要傳給工廠函式 $() 使其成為 jQuery 物件, 才能呼叫 val() 方法來取得該選項之值 :
測試範例如下 :
此網頁中有一組名為 drama 的 checkbox 群組, 其中第二個與第三個選項預設已勾選, 底下有三個按鈕, 按 "清除勾選" 鈕會先找出目前被勾選的選項, 然後呼叫 prop("checked", false) 取消勾選. 按 "勾選全部" 鈕會勾選全部選項. 按 "確定" 鈕則會在底下 id=result 的 div 元素中顯示勾選結果.
<form action="" id="form1">
<div>
<p>推薦的韓劇 :</p>
<input type="checkbox" name="drama" id="drama-1" value="揹著善宰跑">
<label for="drama-1">揹著善宰跑</label>
<input type="checkbox" name="drama" id="drama-2" value="淚之女王" checked>
<label for="drama-2">淚之女王</label>
<input type="checkbox" name="drama" id="drama-3" value="寄生獸" checked>
<label for="drama-3">寄生獸</label>
<input type="checkbox" name="drama" id="drama-4" value="低谷醫生">
<label for="drama-4">低谷醫生</label>
</div>
<div>
<input type="button" value="清除勾選" id="clear">
<input type="button" value="選擇全部" id="check_all">
<input type="button" value="確定" id="ok">
</div>
<div id="result"></div>
</form>
<script>
$(document).ready(function(){
$("#clear").click(function(){
$("[name='drama']:checked").each(function(){
$(this).prop("checked", false);
});
});
$("#check_all").click(function(){
$("[name='drama']").each(function(){
$(this).prop("checked", true);
});
});
$("#ok").click(function(){
var drama=[];
$("[name=drama]:checked").each(function(){
drama.push($(this).val());
});
msg="推薦的韓劇: " + drama.join(",");
$("#result").html(msg);
});
});
</script>
預設已勾選第二項與第三項 :
按勾選全部後按確定 :
參考 :
沒有留言 :
張貼留言