jQuery selector by Attrubute matching value
จากภาพด้านบนนั้น คือการเลือกตัวเลือกตามข้อมูลที่อยู่ในฐานข้อมูล เช่น
ฟิลด์ level มีค่า 2
เมื่อนำมาใส่ในแอตทริบิวต์ data-record-value ของตัวเลือกทุกตัวเรียบร้อย เราสามารถตรวจสอบ checkbox ตัวที่มีค่า value ตรงกับในฐานข้อมูลที่ดึงออกมา หรือตรงกับแอตทริบิวต์ที่สร้างขึ้นมาด้วย jQuery ดังนี้
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return $(this).val() == $(this).data('record-value');
});
โค้ดฉบับเต็มสำหรับนำไปทดสอบกันดูครับ ลองเปลี่ยนค่าใน $row['level'] จาก 2 เป็น 1 และ 3 ตามลำดับดูนะครับ
<?php
$row['level'] = 2;
?>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="/action_page.php">
<input type="checkbox" name="my_level" value="1" data-record-value="<?php echo $row['level'];?>"> พนักงานทั่วไป<br>
<input type="checkbox" name="my_level" value="2" data-record-value="<?php echo $row['level'];?>"> ผู้จัดการ<br>
<input type="checkbox" name="my_level" value="3" data-record-value="<?php echo $row['level'];?>"> ผู้ดูแลระบบ<br>
<input type="button" value="Test" id="btnTest">
</form>
<div id="test">
</div>
<script>
$('#btnTest').click(function(){
$('#test').html('');
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
$('#test').append('<br/>' + $(this).val() + ' = ' + $(this).data('record-value'));
return $(this).val() == $(this).data('record-value');
});
});
</script>
</body>
</html>
ทิ้งท้ายกันสักนิดนึง
โดยปกติแล้วเราอาจจะเคยเขียนแบบระบุ id หรือ element เฉพาะตัวกับค่าในฐานข้อมูลเพื่อ checked ยังตัวเลือกที่ต้องการได้เลย โดยไม่ต้องสร้างแอตทริบิวต์เพิ่มไปใน checkbox แต่ละตัวเช่น
var level = <?php echo $row['level'];?>;
$("input[name=my_level][value=" + value + "]").prop('checked', true);
จะเป็นการสั่ง checked ที่ input ชื่อว่า my_level (ซึ่งมีทั้งหมด 3 ตัว) และเช็คถูกเฉพาะตัวที่มี value = 2 แค่เพียงตัวเดียวเท่านั้น ซึ่งก็สะดวกดี
แต่!! เมื่อผมลองเขียน CodeIgniter แบบใช้ Template Parser Class
การจะแทรกสคริปต์ท้าย View จึงเป็นสิ่งที่ผมหลีกเลี่ยง เพราะจะแยกไฟล์ .js ไปไว้ต่างหาก และสั่ง load เข้าไปในขั้นตอนเดียวกันกับการ load ไฟล์ View คือจะทำใน Controller นั่นเอง ดังนั้นในไฟล์ .js จะไม่มีการ echo ค่าใดๆ หรือไม่มีการแทรกคำสั่ง PHP ได้เลย
ดังนั้น
การสร้างแอตทริบิวต์ data-record-value หรือแอตทริบิวต์ใดๆก้ตามเพื่อระบุค่าจากฐานข้อมูลไว้ และใช้คำสั่งเปรียบเทียบค่า value ของ checkbox, radio button ทุกตัวที่ตรงกัน จะสามารถสร้าง checked พร้อมกันทั้งหมดในครั้งเดียว
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return $(this).val() == $(this).data('record-value');
});
ยังไงก็ลองเอาไปเล่นดูนะครับ เผื่อจะใช้แล้วถูกใจ
---------------------------
จากหนึ่งในข้อจำกัดของโปรเจ็กต์ PHP CI MANIA
ความคิดเห็น
แสดงความคิดเห็น