ประยุกต์ jQuery กับการเลือก checkbox หลายอันพร้อมกัน อย่างง่าย

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

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

ดูแล้ว 14,358 ครั้ง


ตัวอย่างนี้เป็นแนวทางเท่านั้น การประยุกต์ใช้งานเพิ่มเติม จำเป็น
ต้องอาศัยความเข้าใจอื่นๆ ประกอบ
 
รูปแบบหน้าตา คือ จะมีตาราง ของชุดข้อมูล
โดยมีแถว รายการสลับสีพื้นหลังด้วย css คลาส ชื่อ row_css1 และ row_css2
 
และเมื่อมีการเลือกแถวรายการใดๆ ก็จะทำการ เปลี่ยนสีของแถวที่ถูกเลือก ด้วย
css คลาส ชื่อ hiligh_select_row
 
 
วิธีการทดสอบ ติ๊กเลือกรายการที่ 2 เป็นรายการแรก แล้ว กด shift ที่ คีบอร์ตค้างไว้
พร้อมกับ ติ้กเลือกรายการที่ 5 แบบนี้เป็นต้น
ตัวอย่าง


#  Topic
1   Data 1
2   Data 2
3   Data 3
4   Data 4
5   Data 5
6   Data 6
7   Data 7
8   Data 8
9   Data 9
10   Data 10



 
โค้ดทดสอบทั้งหมด คำอธิบาย แสดงในโค้ด
 
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
 
.row_css1{
    background-color:#f4f2f5;  
}
.row_css2{
    background-color:#f2e8f5;  
}
.row_css1:hover,
.row_css2:hover{
    background-color:#EAEAEA;  
}
 
.hiligh_select_row{
    background-color: #9DFFBD;
}
.hiligh_select_row:hover{
    background-color: #9DFFBD;
}
</style>
</head>
 
<body>
 
 
<div style="margin:auto;width:80%;">
 
<br />
<form id="form_test_shift_checkbox" name="form_test_shift_checkbox" method="post" action="">
<table width="100%" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td width="30" height="25" align="center" bgcolor="#D6D6D6"><input name="check_all_item" type="checkbox" id="check_all_item" value="1" /></td>
    <td width="30" height="25" align="center" bgcolor="#D6D6D6">#</td>
    <td height="25" bgcolor="#D6D6D6">&nbsp;Topic</td>
  </tr>
<?php
for($i=1;$i<=10;$i++){
?> 
  <tr  id="IDrow<?=$i?>" class="<?=($i%2==0)?"row_css1":"row_css2"?>">
    <td width="30" height="25" align="center">
      <input name="my_checkbox[]"  type="checkbox" id="my_checkbox[]" class="css_my_checkbox" onclick="toggle_class('<?=$i?>');" value="<?=$i?>" />
  </td>
    <td width="30" height="25" align="center"><?=$i?></td>
    <td height="25">&nbsp; Data <?=$i?></td>
  </tr>
<?php  }?> 
</table>
  </form>
<br />
<br />
 
 
</div>
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
 
// เมื่อ checkbox คลาส css_my_checkbox ถูกติ๊ก
    $(".css_my_checkbox").click(function(e){
        // ตรวจสอบถ้าปุ่ม shift ถูกกดอยู่
        if(e.shiftKey){
            // เก็บค่า ลำดับของ checkbox ที่ถูกติ๊กเลือก
            var nowID_chk=$(".css_my_checkbox").index(this);
            // กำหนดตัวแปร เก็บค่าลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
            var first_index_check=null;
            // วนลูปหา ค่า ลำดับ chexbox ก่อนหน้าที่ถูกติ๊กเลือก
            $(".css_my_checkbox:lt("+nowID_chk+")").each(function(i,k){
                // เริ่มเก็บค่า ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก เฉพาะรายการที่ถูกติ้กเท่านั้น
                if($(".css_my_checkbox:eq("+i+")").prop("checked")==true){
                    // เก็บค่าไว้ในตัวแปร
                    first_index_check=i;
                }  
            });
            // ถ้ามีค่า ลำดับ checkbox ก่อนหน้าที่ถูกเลือก และไม่อยู่ติดกัน
            if(first_index_check!=null && nowID_chk-first_index_check>1){
                // กำหนดตัวแปร เก็บค่า ลำดับต่อจาก ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
                var nextToCheck=first_index_check+1;
                // วนลูปทำงานเลือกเฉพาะ checkbox ที่ยังไม่ถูกเลือก
                for(i=nextToCheck;i<nowID_chk;i++){
                    // เก็บค่าสำหรับ อ้างอิงลำดับแถวของตาราง
                    var rowID=$(".css_my_checkbox:eq("+i+")").val();
                    // เปลี่ยนสีพื้นหลัง เป็นรายการที่ถูกเลือก
                    toggle_class(rowID);
                    // กำหนด checkbox ตามเงื่อนไข ให้ถูกติ้กเลือกทั้งหมด
                    $(".css_my_checkbox:eq("+i+")").prop("checked",true);
                }
            }
        }
    });
     
    $("#check_all_item").click(function(){
        var i_check=$(this).prop("checked");
        if(i_check==true){
            $(".row_css1,.row_css2").addClass("hiligh_select_row");
            $(".css_my_checkbox").prop("checked",true);
        }else{
            $(".row_css1,.row_css2").removeClass("hiligh_select_row");
            $(".css_my_checkbox").prop("checked",false);
        }
    });
     
});
</script>
<script type="text/javascript">
function toggle_class(rowID){
    var placeRow="IDrow"+rowID;
    $("#"+placeRow).toggleClass("hiligh_select_row");
}
</script>
</body>
</html>
 
 
 
ตัาอย่างการใช้งาน กรณีประยุกต์อ้างอิงกับข้อมูลในฐานข้อมูล

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
 
.row_css1{
    background-color:#f4f2f5;  
}
.row_css2{
    background-color:#f2e8f5;  
}
.row_css1:hover,
.row_css2:hover{
    background-color:#EAEAEA;  
}
 
.hiligh_select_row{
    background-color: #9DFFBD;
}
.hiligh_select_row:hover{
    background-color: #9DFFBD;
}
</style>
</head>
 
<body>
 
 
<div style="margin:auto;width:80%;">
<br />
<form id="form_test_shift_checkbox" name="form_test_shift_checkbox" method="post" action="">
<table width="100%" border="0" cellspacing="3" cellpadding="0">
  <tr>
    <td width="30" height="25" align="center" bgcolor="#D6D6D6"><input name="check_all_item" type="checkbox" id="check_all_item" value="1" /></td>
    <td width="30" height="25" align="center" bgcolor="#D6D6D6">#</td>
    <td height="25" bgcolor="#D6D6D6">&nbsp;Topic</td>
  </tr>
<?php
// row_id คือ primary key ของชุดมูลที่เราจะใช้อ้างอิง
$i=1;
$q="SELECT * FROM table_a ORDER BY row_id LIMIT 10 ";
$qr-mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?> 
  <tr  id="IDrow<?=$rs['row_id']?>" class="<?=($i%2==0)?"row_css1":"row_css2"?>">
    <td width="30" height="25" align="center">
      <input name="my_checkbox[]"  type="checkbox" id="my_checkbox[]" class="css_my_checkbox" onclick="toggle_class('<?=$rs['row_id']?>');" value="<?=$rs['row_id']?>" />
  </td>
    <td width="30" height="25" align="center"><?=$i?></td>
    <td height="25">&nbsp; Data <?=$rs['row_id']?></td>
  </tr>
<?php $i++;   }?> 
</table>
  </form>
<br />
<br />
 
 
</div>
 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
 
// เมื่อ checkbox คลาส css_my_checkbox ถูกติ๊ก
    $(".css_my_checkbox").click(function(e){
        // ตรวจสอบถ้าปุ่ม shift ถูกกดอยู่
        if(e.shiftKey){
            // เก็บค่า ลำดับของ checkbox ที่ถูกติ๊กเลือก
            var nowID_chk=$(".css_my_checkbox").index(this);
            // กำหนดตัวแปร เก็บค่าลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
            var first_index_check=null;
            // วนลูปหา ค่า ลำดับ chexbox ก่อนหน้าที่ถูกติ๊กเลือก
            $(".css_my_checkbox:lt("+nowID_chk+")").each(function(i,k){
                // เริ่มเก็บค่า ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก เฉพาะรายการที่ถูกติ้กเท่านั้น
                if($(".css_my_checkbox:eq("+i+")").prop("checked")==true){
                    // เก็บค่าไว้ในตัวแปร
                    first_index_check=i;
                }  
            });
            // ถ้ามีค่า ลำดับ checkbox ก่อนหน้าที่ถูกเลือก และไม่อยู่ติดกัน
            if(first_index_check!=null && nowID_chk-first_index_check>1){
                // กำหนดตัวแปร เก็บค่า ลำดับต่อจาก ลำดับ checkbox ก่อนหน้าที่ถูกติ๊กเลือก
                var nextToCheck=first_index_check+1;
                // วนลูปทำงานเลือกเฉพาะ checkbox ที่ยังไม่ถูกเลือก
                for(i=nextToCheck;i<nowID_chk;i++){
                    // เก็บค่าสำหรับ อ้างอิงลำดับแถวของตาราง
                    var rowID=$(".css_my_checkbox:eq("+i+")").val();
                    // เปลี่ยนสีพื้นหลัง เป็นรายการที่ถูกเลือก
                    toggle_class(rowID);
                    // กำหนด checkbox ตามเงื่อนไข ให้ถูกติ้กเลือกทั้งหมด
                    $(".css_my_checkbox:eq("+i+")").prop("checked",true);
                }
            }
        }
    });
     
    $("#check_all_item").click(function(){
        var i_check=$(this).prop("checked");
        if(i_check==true){
            $(".row_css1,.row_css2").addClass("hiligh_select_row");
            $(".css_my_checkbox").prop("checked",true);
        }else{
            $(".row_css1,.row_css2").removeClass("hiligh_select_row");
            $(".css_my_checkbox").prop("checked",false);
        }
    });
     
});
</script>
<script type="text/javascript">
function toggle_class(rowID){
    var placeRow="IDrow"+rowID;
    $("#"+placeRow).toggleClass("hiligh_select_row");
}
</script>
</body>
</html>


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





Tags:: jquery checkbox







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












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