เนื้อหาต่อไปนี้ จะเป็นแนวทางการใช้งาน checkbox และ radio ซึ่งเป็น element ส่วนหนึ่งของ form โดยเราจะมาดู
แนวทางการใช้งานร่วมกับ jquery ในรูปแบบต่างๆ
ในที่นี้สมมติเรากำหนดชุดข้อมูล เป็นค่าตายตัว เป็นตัวแปร $arr_size แล้วจะทำการวนลูปเพื่อสร้างชุด checkbox
elemenet ที่มีค่าต่างๆ ตามโค้ดด้านล่าง
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" >
</head>
<body>
<br>
<br>
<?php
$arr_size = array(
"1"=>"Size XS",
"2"=>"Size S",
"3"=>"Size M",
"4"=>"Size L",
"5"=>"Size XL",
"6"=>"Size XXL",
);
?>
<div class="containe mx-auto" style="width:500px;">
<?php
foreach($arr_size as $k=>$v){ // วนลูปข้อมูล array ใช้งานค่า key และ value
?>
<input type="checkbox" name="chk_size" id="chk_size_<?=$k?>" value="<?=$k?>">
<label for="chk_size_<?=$k?>"><?=$v?></label>
<br>
<?php } ?>
</div>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
});
</script>
</body>
</html>
จากโค้ด เรากำหนด id สำหรับ input checkbox แต่ละตัว ด้วย chk_size_<?=$k?> ให้มีค่าเท่ากับ for ของ
label เพื่อให้ทั้งสอง element สัมพันธ์กัน โดยที่ เราสามารถเลือกที่กด check ที่ตัวข้อความแทนการกดที่ตัว checkbox
โดยตรงได้
เราสามารถกำหนด css class ให้กับ label เพื่อเปลี่ยน cursor ให้เป็นรูป มือ เพื่อให้ผู้ใช้สังเกตหรือเข้าใจได้ว่า สามารถ
กดเลือก checkbox ผ่านตัว label ได้
<style type="text/css">
.label_chk_size{ cursor:pointer; }
</style>
<label for="chk_size_<?=$k?>" class="label_chk_size"><?=$v?></label>
ต่อไป สมมติเราให้แต่ละ checkbox และ label อยู่ใน div อีกที จะได้เป็น
<style type="text/css">
.label_chk_size{
cursor:pointer;
background-color:#ffeae0;
}
.chk_size_wrap{
background-color:#f5d9cc;
}
</style>
<?php
$arr_size = array(
"1"=>"Size XS",
"2"=>"Size S",
"3"=>"Size M",
"4"=>"Size L",
"5"=>"Size XL",
"6"=>"Size XXL",
);
?>
<div class="containe mx-auto" style="width:500px;">
<?php
foreach($arr_size as $k=>$v){
?>
<div class="chk_size_wrap">
<input type="checkbox" name="chk_size" id="chk_size_<?=$k?>" value="<?=$k?>">
<label for="chk_size_<?=$k?>" class="label_chk_size"><?=$v?></label>
</div>
<?php } ?>
</div>
ผลลัพธ์ที่ได้ จะเห็นว่าตัว label จะมีขนาดความกว้าง ตามขนาดของข้อมูลที่แสดง ไม่เท่ากัน ในขณะที่ div
ที่เรานำมาคลุม นั้นจะกลางเท่ากันหมด
ต่อไปเราลองให้ checkbox อยู่ใน label และกำหนด style display ของ label เป็น block จะได้เป็น
<style type="text/css">
.label_chk_size{
cursor:pointer;
background-color:#ffeae0;
display:block;
}
.chk_size_wrap{
background-color:#f5d9cc;
}
</style>
<?php
$arr_size = array(
"1"=>"Size XS",
"2"=>"Size S",
"3"=>"Size M",
"4"=>"Size L",
"5"=>"Size XL",
"6"=>"Size XXL",
);
?>
<div class="containe mx-auto" style="width:500px;">
<?php
foreach($arr_size as $k=>$v){
?>
<label for="chk_size_<?=$k?>" class="label_chk_size">
<input type="checkbox" name="chk_size" id="chk_size_<?=$k?>" value="<?=$k?>"> <?=$v?>
</label>
<?php } ?>
</div>
ตอนนี้ เราสามารถกดส่วนไหนของ label เพื่อเลือก checkbox ได้ง่ายขึ้น เพราะขนาดความกว้างของ label เท่ากัน
ต่อไปเราจะสร้างความแตกต่าง โดยกำหนด highlight ให้กับ label เมื่อเลื่อนเมาส์อยู่เหนือรายการใดๆ ด้วยการกำหนด
css style ดังนี้
<style type="text/css">
.label_chk_size{
cursor:pointer;
background-color:#ffeae0;
display:block;
margin-bottom:2px;
}
.label_chk_size:hover{
background-color:#f5d9cc;
}
.chk_size_wrap{
background-color:#f5d9cc;
}
</style>
เมื่อเคลื่อนเมาส์เหนือ รายการ label ใดๆ ก็จะทำการ highlight ทำให้เราสังเกตถึงตัวเลือกที่กำลังจะเลือกได้ง่ายขึ้น
ทีนี้ ถ้าเราเลือกรายการใดๆ อยากให้ทำการ highlight รายการนั้นๆ ให้เด่นขึ้นมาอีก ส่วนนี้ เราจำเป็นต้องใช้งาน
jquery เข้ามาช่วย โดยแนวทางคือ เราจะสร้าง css class สำหรับกรณี label ที่มี checkbox ถูกติ้กเลือก แล้วจะใช้
jquery ในการตรวจสอบและกำหนดค่าการ highlight ตามเงื่อนไขการ checked
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" >
</head>
<body>
<br>
<br>
<style type="text/css">
.label_chk_size{
cursor:pointer;
background-color:#ffeae0;
display:block;
margin-bottom:2px;
}
.label_chk_size.is_checked,
.label_chk_size:hover.is_checked{
background-color:#fbbea1;
}
.label_chk_size:hover{
background-color:#f5d9cc;
}
.chk_size_wrap{
background-color:#f5d9cc;
}
</style>
<?php
$arr_size = array(
"1"=>"Size XS",
"2"=>"Size S",
"3"=>"Size M",
"4"=>"Size L",
"5"=>"Size XL",
"6"=>"Size XXL",
);
?>
<div class="containe mx-auto" style="width:500px;">
<?php
foreach($arr_size as $k=>$v){
?>
<label for="chk_size_<?=$k?>" class="label_chk_size">
<input type="checkbox" name="chk_size" id="chk_size_<?=$k?>" value="<?=$k?>"> <?=$v?>
</label>
<?php } ?>
</div>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".label_chk_size").on("click",function(){
$(this).has(":checkbox:checked").addClass("is_checked");
$(this).has(":checkbox:not(:checked)").removeClass("is_checked");
});
});
</script>
</body>
</html>
เราสามารถซ่อน input checkbox โดยกำหนด css เพิ่มเติมเป็นดังนี้
.label_chk_size input{
visibility:hidden;
}
เราสามารถประยุกต์เพิ่มเติมกับ font-awesome เพื่อใช้งาน icon check | check-square | check-circle
โดย icon จะแสดงชัดขึ้นเมื่อรายการนั้นถูกเลือก แนวทางคือ ให้เราเพิ่ม
<i class="far fa-check-square"></i>
แทรกเข้าไปต่อจาก input checkbox
จะได้เป็น
<div class="containe mx-auto" style="width:500px;">
<?php
foreach($arr_size as $k=>$v){
?>
<label for="chk_size_<?=$k?>" class="label_chk_size">
<input type="checkbox" name="chk_size" id="chk_size_<?=$k?>" value="<?=$k?>">
<i class="far fa-check-square"></i>
<?=$v?>
</label>
<?php } ?>
</div>
ปรับส่วนของ jquery
<script type="text/javascript">
$(function(){
$(".label_chk_size").on("click",function(){
$(this).has(":checkbox:checked").addClass("is_checked").find("i").addClass("fas");
$(this).has(":checkbox:not(:checked)").removeClass("is_checked").find("i").removeClass("fas");;
});
});
</script>
โค้ดทั้งหมด
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body>
<br>
<br>
<style type="text/css">
.label_chk_size{
cursor:pointer;
background-color:#ffeae0;
display:block;
margin-bottom:2px;
}
.label_chk_size.is_checked,
.label_chk_size:hover.is_checked{
background-color:#fbbea1;
}
.label_chk_size:hover{
background-color:#f5d9cc;
}
.label_chk_size input{
visibility:hidden;
}
.chk_size_wrap{
background-color:#f5d9cc;
}
</style>
<?php
$arr_size = array(
"1"=>"Size XS",
"2"=>"Size S",
"3"=>"Size M",
"4"=>"Size L",
"5"=>"Size XL",
"6"=>"Size XXL",
);
?>
<div class="containe mx-auto" style="width:500px;">
<?php
foreach($arr_size as $k=>$v){
?>
<label for="chk_size_<?=$k?>" class="label_chk_size">
<input type="checkbox" name="chk_size" id="chk_size_<?=$k?>" value="<?=$k?>">
<i class="far fa-check-square"></i>
<?=$v?>
</label>
<?php } ?>
</div>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".label_chk_size").on("click",function(){
$(this).has(":checkbox:checked").addClass("is_checked").find("i").addClass("fas");
$(this).has(":checkbox:not(:checked)").removeClass("is_checked").find("i").removeClass("fas");;
});
});
</script>
</body>
</html>
สังเกตว่า ใน font-awesome css class ที่ชื่อ fas จะเป็นตัวพื้นหลังเข็ม ส่วน far จะเป็นตัวพื้นหลังจาง รูปแบบการ
ทำงาน ให้หา i ที่อยู่ใน label แล้วเปลี่ยน icon เป็นพื้นหลังเข็มใน checkbox ที่ถูกเลือก และเปลี่ยน icon เป็นตัว
พื้นจาง เมื่อ checkbox ยกเลิกการเลือก
