checkbox ฝังค่า value ไว้ 2 ค่าได้ไหมครับ ระหวัง เช็คกับไม่เช็ค

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา checkbox ฝังค่า value ไว้ 2 ค่าได้ไหมครับ ระหวัง เช็คกับไม่เช็ค

checkbox ฝังค่า value ไว้ 2 ค่าได้ไหมครับ ระหวัง เช็คกับไม่เช็ค
ตามหัวข้อเลยครับ จะเปนพวกสคริป หรือ อะไรก็ได้คับผมว่าจะเก็บค่า 0 กับ 1 ไว้ในฐานข้อมูล mysql เเล้วมาสั่ง เเสดง กับไม่เเสดงไอค่อน


Attapol Khaiwluea 19-03-2019 01:42:59

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
เราสามารถใช้ data attribute เพิ่มค่าหรือข้อมูลที่ต้องการลงไปใน แท็ก html ใดๆ ได้
โดยสามารถเรียกใช้ได้ทั้งผ่าน css และ javascript
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="checkbox" name="mychk" id="mychk" value="myvalue"
    data-status="off"
    data-icon="myicon"
    onChange="doMyfunc()" >
<label for="mychk"> 
test     
</label>
<script>
function doMyfunc(){
    // อ้างอิง HTML DOM Object ที่ต้องการจัดการ
    const obj = document.querySelector("#mychk");
    var _get_status = obj.dataset.status;  // ดึงค่าจาก data attribute
    var _get_icon = obj.dataset.icon;  // ดึงค่าจาก data attribute
    var chechkedStatus = obj.checked; // เก็บสถานะการ checked หรือติ้กเลือก
    alert(_get_status+"\r\n"+_get_icon+"\r\n"+chechkedStatus); // ทดสอบแสดงค่า
    obj.dataset.status = (chechkedStatus==true)?"on":"off"; // กำหนดค่าตามเงื่อนไข
    // วิธีการกำหนดค่าของ data attribute จะใช้รูปแบบ
    // obj.dataset.status = ค่าที่ต้องการ;
    var _get_status = obj.dataset.status;  // ดึงค่าจาก data attribute ใหม่
    alert(_get_status+"\r\n"+_get_icon+"\r\n"+chechkedStatus); // ทดสอบแสดงค่า
}
</script>
 
การอ้างอิง DOM Object ใน javascrpt เราสามารถส่งค่าเข้ามาในฟังก์ชั่นเลยก็ได้เช่น
 
1
onChange="doMyfunc(this)"  // this ก็คือตัว checkbox นั้นเอง
 
ส่วนของ js ก็จะเป็น
 
1
2
3
function doMyfunc(obj){
    // เราสามารถ อ้างอิง Object ผ่านตัวแปร obj ได้เลย
}
 
เรียกใช้งาน data attribute ผ่าน js เพื่ออ้างอิง object ได้ ดูการกำหนดในรูปแบบต่างๆ ด้านล่าง
 
1
2
const obj = document.getElementById("mychk");  // อ้างอิงผ่าน id
const obj = document.querySelector("[data-status]"); // อ้างอิงผาน data attribute
 
เราสามารถกำหนด css style โดยใช้ค่า data attribute ได้ สมมติว่า เราต้องการให้ label ที่ถัดจาก
checkbox มีสีตามค่าที่ต้องการ
 
1
2
3
4
5
6
7
8
<style>
#mychk[data-status="off"]+label{
  color:red;
}
#mychk[data-status="on"]+label{
  color:green;
}
</style>
 

หรือจะใช้ css style ดึงค่าข้อมูลของ data attribute มาใช้ก็ได้ เช่น
สมมติเราไม่ใช้ label แต่จะใช้ ::after เพื่อกำหนดส่วนที่แสดงต่อจาก checkbox
โดยค่าที่แสดง เราจะใช้จาก data attribute ผ่าน attr() ฟังก์ช่ันของ css จะได้เป็น
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
#mychk[data-status="off"]::after{
  color:red;     
  content:attr(data-status);
  margin-left:20px;
  display:inline-block;
}
#mychk[data-status="on"]::after{
  color:green;
  content:attr(data-status);
  margin-left:20px;
  display:inline-block;
}
</style>
<input type="checkbox" name="mychk" id="mychk" value="myvalue"
    data-status="off"
    data-icon="myicon"
    onChange="doMyfunc()" >
<script>
function doMyfunc(){
    const obj = document.querySelector("[data-status]");
    var _get_status = obj.dataset.status;  // ดึงค่าจาก data attribute
    var chechkedStatus = obj.checked; // เก็บสถานะการ checked หรือติ้กเลือก
    obj.dataset.status = (chechkedStatus==true)?"on":"off"; // กำหนดค่าตามเงื่อนไข
}
</script>

 
ตัวอย่างการใช้งานร่วมกับ jQuery
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style>
#mychk[data-status="off"]::after{
  color:red;     
  content:attr(data-status);
  margin-left:20px;
}
#mychk[data-status="on"]::after{
  color:green;
  content:attr(data-status);
  margin-left:20px;
}
</style>
<input type="checkbox" name="mychk" id="mychk" value="myvalue"
    data-status="off"
    data-icon="myicon" >
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
     $("#mychk").on("change",function(){
         var _get_status = $(this).data("status");  // ดึงค่าจาก data attribute
         var chechkedStatus = ($(this).prop("checked")==true)?"on":"off";
         $(this).data("status",chechkedStatus); // กำหนดค่า data attribute
     });
});
</script>


บทความแนะนำที่เกี่ยวข้อง
ประยุกต์รวมข้อมูลแถวในตาราง ด้วย jquery ร่วมกับ data attributeอ่าน 10,788
ninenik 19-03-2019
 ความคิดเห็นที่ 2


Attapol Khaiwluea 26-03-2019 01:20







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ