Method syntax : val
val()
คืนค่า attribute value ของ element ตัวแรกที่พบใน selector แต่ถ้ากรณี element เป็นรูปแบบ multi-select element จะคืนค่า value มาเป็น Array ใน Selection
Method ตัวนี้ค่อนข้างมีประโยชน์มาก ถ้าเราต้องการ value ของ wrapper หรือ element ตัวที่เราต้องการเช่น
<input id='specialtxt' type='text' size='50' value='50' />
เราต้องการ ค่า value ใน input type text นี้ ดึงโดย $('input:text#specialtxt').val() ค่าที่ได้ออกมา จะเท่ากับ 50
แต่ความพิเศษของ val ไม่ได้มีเพียงเท่านี้ยังสามารถใช้อย่างมีประสิทธิภาพกับ radio button อีกด้วย
val() กับ radio button
<input type='radio' name='radioGroup1' value='1' />radio1
<input type='radio' name='radioGroup1' value='2' checked='checked' />radio2
<input type='radio' name='radioGroup1' value='3' />radio3
จากโค้ดตัวอย่างเป็น กลุ่ม radio button แต่มีเพียง 1 ตัวเท่านั้นที่ถูก checked และ radio กลุ่มนี้เป็นกลุ่มเดียวกันดังนั้นในกลุ่มนี้จะสามารถ checked ได้แค่ตัวเดียวเท่านั้น
val สามารถช่วยเราดึงค่าใน radio ที่มีการถูก checked เท่านั้นออกมาได้
$("[name='radioGroup1']:checked").val()
ประโยคนี้จะทำให้คืนค่า value ของค่า radio ที่ถูก checked ไว้หรือเป็น undefined ถ้าไม่มีตัวไหนถูก checked การใช้ val นี้มีประโยชน์กว่าการที่เราจะต้องมา loop หา checked ของ element
val() กับ checkbox
แต่เพราะ val() จะสนใจเฉพาะ element ตัวแรกที่พบใน wrapper set เท่านั้น การทำแบบ radio button มาใช้ใน checkbox ไม่สามารถใช้ได้แน่นอน เพราะ checkbox สามารถถูก checked ได้หลายตัวในกลุ่ม แต่เราสามารถใช้ JQuery นี้แทนได้
var checkboxValues = $('[name="checkboxGroup"]:checked').map(
function(){return $(this).val(); }
).toArray();
ค่าที่เก็บใน checkboxValues นั้นจะได้เป็น Array ที่เก็บค่า value ของกลุ่ม checkbox ที่ถูก checked
การ set ค่า value ด้วย val()
val(value)
Parameter: String หรือ Function(ใน Function นี้มี parameter index กับ value)
Return : wrapped set
ตัวอย่าง การ set ค่าด้วย function
$('input:text.items').val(function( index, value ) {
return value + ' ' + this.className;
});
การ set ค่า value ของ checkbox, select, radio
val(values)
เซ็ตค่าให้กับ checkboxs, radio button, หรือ option ของ <select> element โดยจะทำการ checked หรือ เลือก selected ถ้า value มีการ match ตรงกับ ค่าต่างที่ถูกส่งมาใน array
Parameter :
values เป็น Array ของ value ที่เราต้องการให้ elements ตัดสินใจว่าจะติ๊ก หรือเลือก
Return : wrapped set
ตัวอย่าง จาก script HTML ดังกล่าว มี checkbox
<input type='checkbox' value='1' /> :1
<input type='checkbox' value='2' /> :2
<input type='checkbox' value='3' /> :3
<input type='checkbox' value='4' /> :4
กำหนดค่าให้ มีการ checked ให้กับ checkbox โดยใช้ val(values)
$(":checkbox").val(['1','3'])
$(":checkbox").val(['1','3'])
$(":checkbox").val(['1','3'])
โดย Mirror of Kagami
ไม่มีความคิดเห็น:
แสดงความคิดเห็น