แนวทางควบคุม checkbox และ radio ผ่าน element อื่นๆ ด้วย jquery

เขียนเมื่อ 6 ปีก่อน โดย Ninenik Narkdee
checkbox radio jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ checkbox radio jquery

ดูแล้ว 6,776 ครั้ง


เนื้อหาต่อไปนี้ จะเป็นแนวทางการใช้งาน checkbox และ radio ซึ่งเป็น element ส่วนหนึ่งของ form โดยเราจะมาดู
แนวทางการใช้งานร่วมกับ jquery ในรูปแบบต่างๆ
    ในที่นี้สมมติเรากำหนดชุดข้อมูล เป็นค่าตายตัว เป็นตัวแปร $arr_size แล้วจะทำการวนลูปเพื่อสร้างชุด checkbox
elemenet ที่มีค่าต่างๆ ตามโค้ดด้านล่าง
 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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/bootstrap@4.1.0/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/jquery@3.3.1/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 ได้
 
1
2
3
<style type="text/css">
.label_chk_size{ cursor:pointer; }
</style>
 
1
<label for="chk_size_<?=$k?>" class="label_chk_size"><?=$v?></label>
 
ต่อไป สมมติเราให้แต่ละ checkbox และ label อยู่ใน div อีกที จะได้เป็น
 
 
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
27
28
29
<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 จะได้เป็น
 
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
27
28
29
<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 ดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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
 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!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/bootstrap@4.1.0/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/jquery@3.3.1/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 เพิ่มเติมเป็นดังนี้
 
1
2
3
.label_chk_size input{ 
    visibility:hidden;
}
 
เราสามารถประยุกต์เพิ่มเติมกับ font-awesome เพื่อใช้งาน icon check | check-square | check-circle
โดย icon จะแสดงชัดขึ้นเมื่อรายการนั้นถูกเลือก แนวทางคือ ให้เราเพิ่ม
 
1
<i class="far fa-check-square"></i>
 
แทรกเข้าไปต่อจาก input checkbox
 
จะได้เป็น
 
1
2
3
4
5
6
7
8
9
10
11
<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 
 
1
2
3
4
5
6
7
8
<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>
โค้ดทั้งหมด

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!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/bootstrap@4.1.0/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/jquery@3.3.1/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 ยกเลิกการเลือก
 




กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: checkbox radio jquery







URL สำหรับอ้างอิง












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