หน้าแรก

jQuery คำสั่ง .val() ใน jquery


.val() Returns: Returns: String, Array

คำสั่ง .val() ใช้สำหรับแสดงค่า value ของ form ทั้งที่เป็น แบบ selected , checked , และ value โดยหาก input form นั้นๆ สามารถมีค่าเป็นแบบ select multiple=”multiple” ได้ ค่าที่ return กลับมาจะเป็น array เช่น

ถ้าเรามี html เป็น

<!--Text Box-->
<input type="textbox" value="jquery" id="text1">
 
<!--Check Box-->
<input type="checkbox" value="thai" checked="checked" name="checkbox1">
<input type="checkbox" value="usa" name="checkbox1">
<input type="checkbox" value="japan"  checked="checked" name="checkbox1">
 
<!--Select Box-->
<select id="char">
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected="selected">c</option>
<option value="d">d</option>
</select>
 
<!--Multi Select Box-->
<select id="number" multiple="multiple">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4" selected="selected">3</option>
</select>
 
<script type="text/javascript">
/* get ค่าจาก value จาก textbox */
alert(jQuery('#text1').val()); // จะ alert "jquery"
 
 
/* get ค่าจาก value จาก checkbox */
$('[name="checkbox1"]:checked').each(function(){
	alert($(this).val()); // จะ alert thai และ japan ตามลำดับ (alert 2 ครั้ง)
});
//Warning
//get ค่าจาก value จาก checkbox แบบที่ "ผิดวิธี" แบบที่1
alert(jQuery('[name="checkbox1"]').val()); // จะ alert "thai" ซึ่งก็คือค่าตัวแรก ตัวเดียว  
//get ค่าจาก value จาก checkbox แบบที่ "ผิดวิธี" แบบที่2
alert(jQuery('[name="checkbox1"]:checked').val()); // จะ alert "thai" ซึ่งก็คือค่าตัวแรก ตัวเดียว   
//get ค่าจาก value จาก checkbox แบบที่ "ผิดวิธี" แบบที่3  (ตัวอย่างนี้ลอกมาจาก web jquery)
alert($('input:checkbox:checked').val());// จะ alert "thai" ซึ่งก็คือค่าตัวแรก ตัวเดียว   
 
/* get ค่าจาก value จาก Select Box */
alert(jQuery('#char').val());
// จะ alert "c"
 
/* get ค่าจาก value จาก Multi Select Box */
alert(jQuery('#number').val()); // จะ alert "2,4"  (alert 1 ครั้ง)
jQuery('#number option:selected').each(function(){
	alert($(this).val()); //จะ alert 2 และ 4  ตามลำดับ   (alert 2 ครั้ง)
});
 
</script>

.val(value) return:jQuery

.val(value) คือการ set ค่าใ้ห้กับ input form ใดๆ ใช้ได้กับ input form ทุกแบบ

<!--Text Box-->
<input type="textbox" id="text1">
 
<!--Check Box-->
<input type="checkbox" value="thai"  name="checkbox1">
<input type="checkbox" value="usa" name="checkbox1">
<input type="checkbox" value="japan"  name="checkbox1">
 
<!--Select Box-->
<select id="char">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
</select>
 
<!--Multi Select Box-->
<select id="number" multiple="multiple">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
 
<script type="text/javascript">
/* set ค่า value ให้ textbox */
jQuery('#text1').val('jQuerythai'); //  ผลที่ไ้ด้ <input type="textbox" id="text1" value="jQuerythai">
 
/* set ค่า value ให้ checkbox */
$('[name="checkbox1"]').val(['usa','japan']); 
// ผลที่ไ้ด้คือจะทำการ check usa และ japan
// <input type="checkbox" value="thai"  name="checkbox1">
// <input type="checkbox" value="usa" name="checkbox1" checked="checked">
// <input type="checkbox" value="japan"  name="checkbox1 checked="checked"">
 
/* set ค่า value ให้ select box */
$('[name="char"]').val('d'); 
// ผลที่ไ้ด้คือจะทำการ selected option "d"
/*
<select id="char">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d" selected="seleced">d</option>
</select>
*/
 
<!--set ค่า value ให้ Multi Select Box-->
$('#number').val(['1','4']); 
//จะทำการ select option 1 และ option 4
/*
<select id="number" multiple="multiple">
<option value="1"  selected="seleced">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4"  selected="seleced">4</option>
</select>
 
*/
</script>

เขียนโดย : tikstt
เว็บไซท์ : http://tikstt.or.hn


jQuery คำสั่ง .html() jQuery traversing #ตอนที่ 1 filtering คำสั่ง .eq()
บทความที่เกี่ยวข้อง

ดูบทความ jquery ทั้งหมด »