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
 
<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 เราสามารถส่งค่าเข้ามาในฟังก์ชั่นเลยก็ได้เช่น
 
onChange="doMyfunc(this)"  // this ก็คือตัว checkbox นั้นเอง
 
ส่วนของ js ก็จะเป็น
 
function doMyfunc(obj){
    // เราสามารถ อ้างอิง Object ผ่านตัวแปร obj ได้เลย
}
 
เรียกใช้งาน data attribute ผ่าน js เพื่ออ้างอิง object ได้ ดูการกำหนดในรูปแบบต่างๆ ด้านล่าง
 
const obj = document.getElementById("mychk");  // อ้างอิงผ่าน id
const obj = document.querySelector("[data-status]"); // อ้างอิงผาน data attribute
 
เราสามารถกำหนด css style โดยใช้ค่า data attribute ได้ สมมติว่า เราต้องการให้ label ที่ถัดจาก
checkbox มีสีตามค่าที่ต้องการ
 
<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 จะได้เป็น
 
 
<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
 
<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,417
ninenik 19-03-2019
 ความคิดเห็นที่ 2


Attapol Khaiwluea 26-03-2019 01:20






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ