jquery นับจำนวนเลือก radio array อย่างน้อย 1 ตัว แต่ไม่เกิน 3

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา jquery นับจำนวนเลือก radio array อย่างน้อย 1 ตัว แต่ไม่เกิน 3

jquery นับจำนวนเลือก radio array อย่างน้อย 1 ตัว แต่ไม่เกิน 3
<input type="radio" name="person_id[<?php echo $i;?>]" id="person_id<?php echo $i;?>" value="<?php echo $value['person_id'];?>">
เรดิโอ อาเรย์ ตัวนี้ เราจะเช็คยังไง ให้เลือกได้ไม่เกิน 3 ตัว ครับ


สุธน ภักดี 18-02-2024 19:22:12

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

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


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


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

 ความคิดเห็นที่ 1 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ninenik.com</title>
</head>
<body>

  <input type="checkbox" name="myradio1" class="myradioclass" value="1">1
  <input type="checkbox" name="myradio2" class="myradioclass" value="2">2
  <input type="checkbox" name="myradio3" class="myradioclass" value="3">3
  <input type="checkbox" name="myradio4" class="myradioclass" value="4">4
  <input type="checkbox" name="myradio5" class="myradioclass" value="5">5

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $(function(){
  $(".myradioclass").on("click",function(){
    var checkLength = $(".myradioclass:checked").length;
    if(checkLength>3){
      return false;
    }
  });    
  });

</script>
</body>
</html>
ถ้ากำหนดให้เลือก หรือไม่เลือกได้ ให้ใช้เป็น checkbox แทน
กำหนด class เข้าไปเพื่อใช้อ้างอิง แล้วนับจำนวนรายการที่ถูกเลือก หรือ checked


ตัวอย่าง DEMO

ninenik 19-02-2024
 ความคิดเห็นที่ 2
ขอบคุณค้าบบบ แจ่มเลย


สุธน ภักดี 19-02-2024 15:11
 ความคิดเห็นที่ 3
จากเรดิโอนี้ แล้วถ้าเราจะบังคับว่า ต้องเลือกแบบต่อเนื่อง คนๆเดียวกัน และเวลาก็ต้องติดกันละครับ


สุธน ภักดี 25-02-2024 10:40
 ความคิดเห็นที่ 4
ต้องอธิบายให้เห็นภาพชัดเจนกว่านี้ ถึงจะแนะนำได้ เช่น สมมติว่า เลือกแบบไหน ต้องเป็นแบบไหน อย่างคนแรกเลือก 8 โมงต้องเลือก 9 และ 10 ด้วยหรือไม่ แล้วคนที่สองตั้งเลือกไม่ซ้ำคนแรกหรือไ่ม่ อื่นๆ

>>>  อัพเดท >>> 25-02-2024
------------------------------------------
แนวทางการเลือก 3 รายการติดๆ กัน

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ninenik.com</title>
</head>
<body>
 

  <input type="checkbox" name="myradio1" class="myradioclass" value="1">1
  <input type="checkbox" name="myradio2" class="myradioclass" value="2">2
  <input type="checkbox" name="myradio3" class="myradioclass" value="3">3
  <input type="checkbox" name="myradio4" class="myradioclass" value="4">4
  <input type="checkbox" name="myradio5" class="myradioclass" value="5">5
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $(function(){
  $(".myradioclass").on("click",function(){
    $(".myradioclass").prop("checked",false); // ยกเลิกเลือกทั้งหมด
    let maxCheck = 3; // บังคับเลือก 3 รายการติด
    let totalObj = $(".myradioclass").length; // ในกลุ่มมีทั้งหมด  
    let indexObj = $(".myradioclass").index(this); // ตัวแรกที่เลือกเป็นตัวที่
    let startChek = indexObj; // กำหนดตัวแรกที่จะถูกเลือก
    if(totalObj-indexObj<maxCheck){ // ตรวจสอบว่าเป็นตัวท้ายๆ หรือไม่
      // ถ้าเป็นตัวท้ายๆ คำนวณหาว่ายังขาดอีกเท่าไรถึงจะครบจำนวนบังคับเลือก
      let needObj = maxCheck-(totalObj-indexObj);
      startChek = indexObj-needObj; // หาตำแหน่งแรกเพื่อนับให้ครบจำนวน
    }
    let endCheck = startChek + maxCheck; // ตำแหน่งสุดท้ายที่จะเลือก
    for(let i=startChek;i<endCheck;i++){ // วนลูปเลือกรายการ
      $(".myradioclass").eq(i).prop("checked",true);
    }
  });    
  });
 
</script>
</body>
</html>

ตัวอย่าง DEMO

ninenik 25-02-2024
 ความคิดเห็นที่ 5
โทษทีครับ เงื่อนไขคือ เลือกได้ไม่เกิน 3 กรณีที่เลือก 2 หรือ 3 ตัว ต้องเลือกชม.ติดๆกัน ในคอลัมภ์เดียวกันครับ


สุธน ภักดี 25-02-2024 13:34
 ความคิดเห็นที่ 6
ดูตัวอย่างนี้เป็นแนวทาง

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ninenik.com</title>
</head>
<body>
  
  <input type="radio" name="myradio1" class="myradioclass" value="1">1
  <input type="radio" name="myradio2" class="myradioclass" value="2">2
  <input type="radio" name="myradio3" class="myradioclass" value="3">3
  <input type="radio" name="myradio4" class="myradioclass" value="4">4
  <input type="radio" name="myradio5" class="myradioclass" value="5">5
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  $(".myradioclass").on("click",function(e){
    let maxCheck = 3; // บังคับเลือก 3 รายการติด
    let totalObj = $(".myradioclass").length; // ในกลุ่มมีทั้งหมด  
    let indexObj = $(".myradioclass").index(this); // ตัวที่เลือกตัวที่
    let nearObj = []; // กำหนดไว้เก็บค่ารายการที่สามารถเลือกได้
    
    let checkLength = $(".myradioclass:checked").length;
    if(checkLength>3){
      return false;
    }    
    

    if(checkLength>1){ // ถ้าเริ่มเลือกตัวที่สองขึ้นไป
      // เป็นรายการแรก หรือรายการสุดท้ายหรือไม่
      if([0,totalObj-1].includes(indexObj)){
        if(indexObj==0){ // เป็นรายการแรก
          nearObj = [indexObj+1]; // ตัวใกล้คือตัวถัดไป
        }else{ // รายการสุดท้าย
          nearObj = [indexObj-1]; // ตัวใกล้คือตัวก่อนหน้า
        }
      }else{ // ไม่ใช่รายการแรก และรายการสุดท้าย
        nearObj = [indexObj-1,indexObj+1]; // ตัวใกล้คือตัวที่อยู่ข้างๆ
      } 
      let canCheck = false;  // เริ่มต้นเลือกไม่ได้
      $.map(nearObj,(i,o)=>{
        if($(".myradioclass").eq(i).prop("checked")){
          // ถ้ามีรายการใกล้ๆ ถูกเลือก รายการนั้นสามารถเลือกได้
          canCheck = true;
        }
      });
      return canCheck;
    }

  });
});
  
</script>
</body>
</html>


>>>  อัพเดท >>> 25-02-2024
------------------------------------------
กรณีใช้หลายคอลัมน์ หรือหลายชุด ให้กำหนด class ให้กับ parent แล้วปรับโค้ดเป็นแบบนี้

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ninenik.com</title>
</head>
<body>
  
  <div class="place_area">
  <input type="radio" name="myradio1" class="myradioclass" value="1">1
  <input type="radio" name="myradio2" class="myradioclass" value="2">2
  <input type="radio" name="myradio3" class="myradioclass" value="3">3
  <input type="radio" name="myradio4" class="myradioclass" value="4">4
  <input type="radio" name="myradio5" class="myradioclass" value="5">5
  </div>
  
  <div class="place_area">
  <input type="radio" name="myradio12" class="myradioclass" value="1">1
  <input type="radio" name="myradio22" class="myradioclass" value="2">2
  <input type="radio" name="myradio32" class="myradioclass" value="3">3
  <input type="radio" name="myradio42" class="myradioclass" value="4">4
  <input type="radio" name="myradio52" class="myradioclass" value="5">5
  </div>  
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  $(".myradioclass").on("click",function(e){
    const parentObj = $(this).parents(".place_area");
    let maxCheck = 3; // บังคับเลือก 3 รายการติด
    let totalObj = parentObj.find(".myradioclass").length; // ในกลุ่มมีทั้งหมด  
    let indexObj = parentObj.find(".myradioclass").index(this); // ตัวที่เลือกตัวที่
    let nearObj = []; // กำหนดไว้เก็บค่ารายการที่สามารถเลือกได้
    
    let checkLength = parentObj.find(".myradioclass:checked").length;
    if(checkLength>3){
      return false;
    }    
    console.log(totalObj);

    if(checkLength>1){ // ถ้าเริ่มเลือกตัวที่สองขึ้นไป
      // เป็นรายการแรก หรือรายการสุดท้ายหรือไม่
      if([0,totalObj-1].includes(indexObj)){
        if(indexObj==0){ // เป็นรายการแรก
          nearObj = [indexObj+1]; // ตัวใกล้คือตัวถัดไป
        }else{ // รายการสุดท้าย
          nearObj = [indexObj-1]; // ตัวใกล้คือตัวก่อนหน้า
        }
      }else{ // ไม่ใช่รายการแรก และรายการสุดท้าย
        nearObj = [indexObj-1,indexObj+1]; // ตัวใกล้คือตัวที่อยู่ข้างๆ
      } 
      let canCheck = false;  // เริ่มต้นเลือกไม่ได้
      $.map(nearObj,(i,o)=>{
        if(parentObj.find(".myradioclass").eq(i).prop("checked")){
          // ถ้ามีรายการใกล้ๆ ถูกเลือก รายการนั้นสามารถเลือกได้
          canCheck = true;
        }
      });
      return canCheck;
    }

  });
});
  
</script>
</body>
</html>

ตัวอย่าง DEMO

ninenik 25-02-2024
 ความคิดเห็นที่ 7
ขอบคุณมากครับผม


สุธน ภักดี 25-02-2024 20:14
 ความคิดเห็นที่ 9
ถ้าโครงสร้าง html ลักษณะนี้ อาจจะต้องใช้ data attribute มาช่วย เพื่อแยกกลุ่มของข้อมูล  สมมติเช่น ใช้เป็นชื่อว่า set ก็จะเพิ่มเข้าไป
เป็น data-set="set1" จากนั้นก็เปลี่ยนโค้ดการอ้างอิงเล็กน้อย ก็น่าจะสามารถใช้ได้

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ninenik.com</title>
</head>
<body>
   
  <table>
    <tr>
      <td>Name 1</td>
      <td>Name 2</td>
    </tr>
    <tr>
      <td><input type="radio" name="myradio1" data-set="set1" class="myradioclass" value="1">1</td>
      <td><input type="radio" name="myradio12" data-set="set2" class="myradioclass" value="1">1</td>
    </tr>
    <tr>
      <td><input type="radio" name="myradio2" data-set="set1" class="myradioclass" value="2">2</td>
      <td><input type="radio" name="myradio22" data-set="set2" class="myradioclass" value="2">2</td>
    </tr>
    <tr>
      <td><input type="radio" name="myradio3" data-set="set1" class="myradioclass" value="3">3</td>
      <td><input type="radio" name="myradio32" data-set="set2" class="myradioclass" value="3">3</td>
    </tr>
    <tr>
      <td><input type="radio" name="myradio4" data-set="set1" class="myradioclass" value="4">4</td>
      <td><input type="radio" name="myradio42" data-set="set2" class="myradioclass" value="4">4</td>
    </tr>
    <tr>
      <td><input type="radio" name="myradio5" data-set="set1" class="myradioclass" value="5">5</td>
      <td><input type="radio" name="myradio52" data-set="set2" class="myradioclass" value="5">5</td>
    </tr>
  </table>
  
  
   
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  $(".myradioclass").on("click",function(e){
    let setID = $(this).data("set"); // ดึงข้อมูล กลุ่มที่กำหนด
    let maxCheck = 3; // บังคับเลือก 3 รายการติด
    let totalObj = $("[data-set='"+setID+"']").length; // ในกลุ่มมีทั้งหมด  
    let indexObj = $("[data-set='"+setID+"']").index(this); // ตัวที่เลือกตัวที่
    let nearObj = []; // กำหนดไว้เก็บค่ารายการที่สามารถเลือกได้
     
    let checkLength = $("[data-set='"+setID+"']:checked").length;
    if(checkLength>3){
      return false;
    }    
     
 
    if(checkLength>1){ // ถ้าเริ่มเลือกตัวที่สองขึ้นไป
      // เป็นรายการแรก หรือรายการสุดท้ายหรือไม่
      if([0,totalObj-1].includes(indexObj)){
        if(indexObj==0){ // เป็นรายการแรก
          nearObj = [indexObj+1]; // ตัวใกล้คือตัวถัดไป
        }else{ // รายการสุดท้าย
          nearObj = [indexObj-1]; // ตัวใกล้คือตัวก่อนหน้า
        }
      }else{ // ไม่ใช่รายการแรก และรายการสุดท้าย
        nearObj = [indexObj-1,indexObj+1]; // ตัวใกล้คือตัวที่อยู่ข้างๆ
      } 
      let canCheck = false;  // เริ่มต้นเลือกไม่ได้
      $.map(nearObj,(i,o)=>{
        if($("[data-set='"+setID+"']").eq(i).prop("checked")){
          // ถ้ามีรายการใกล้ๆ ถูกเลือก รายการนั้นสามารถเลือกได้
          canCheck = true;
        }
      });
      return canCheck;
    }
 
  });
});
   
</script>
</body>
</html>

ตัวอย่าง DEMO

บทความแนะนำที่เกี่ยวข้อง
การกำหนด selectors ด้วย jQuery แบบตัวกรอง Attributeอ่าน 11,046
ประยุกต์รวมข้อมูลแถวในตาราง ด้วย jquery ร่วมกับ data attributeอ่าน 10,492
ninenik 26-02-2024
 ความคิดเห็นที่ 10
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Ninenik.com</title>
</head>
<body>
    
  <table>
    <tr>
      <td>Name 1</td>
      <td>Name 2</td>
    </tr>
<?php for($i=1;$i<=5;$i++){?>      
    <tr>
      <td><input type="radio" name="myradio[<?php echo $i;?>]" data-set="set<?php echo $i;?>" class="myradioclass" value="1"><?php echo $i;?></td>
      <td><input type="radio" name="myradio[<?php echo $i;?>]" data-set="set<?php echo $i;?>" class="myradioclass" value="2"><?php echo $i;?></td>
    </tr>
  <?php }?>  
  </table>
   
   
    
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(function(){
  $(".myradioclass").on("click",function(e){
    let setID = $(this).data("set"); // ดึงข้อมูล กลุ่มที่กำหนด
    let maxCheck = 3; // บังคับเลือก 3 รายการติด
    let totalObj = $("[data-set='"+setID+"']").length; // ในกลุ่มมีทั้งหมด  
    let indexObj = $("[data-set='"+setID+"']").index(this); // ตัวที่เลือกตัวที่
    let nearObj = []; // กำหนดไว้เก็บค่ารายการที่สามารถเลือกได้
      
    let checkLength = $("[data-set='"+setID+"']:checked").length;
    if(checkLength>3){
      return false;
    }    
      
  
    if(checkLength>1){ // ถ้าเริ่มเลือกตัวที่สองขึ้นไป
      // เป็นรายการแรก หรือรายการสุดท้ายหรือไม่
      if([0,totalObj-1].includes(indexObj)){
        if(indexObj==0){ // เป็นรายการแรก
          nearObj = [indexObj+1]; // ตัวใกล้คือตัวถัดไป
        }else{ // รายการสุดท้าย
          nearObj = [indexObj-1]; // ตัวใกล้คือตัวก่อนหน้า
        }
      }else{ // ไม่ใช่รายการแรก และรายการสุดท้าย
        nearObj = [indexObj-1,indexObj+1]; // ตัวใกล้คือตัวที่อยู่ข้างๆ
      } 
      let canCheck = false;  // เริ่มต้นเลือกไม่ได้
      $.map(nearObj,(i,o)=>{
        if($("[data-set='"+setID+"']").eq(i).prop("checked")){
          // ถ้ามีรายการใกล้ๆ ถูกเลือก รายการนั้นสามารถเลือกได้
          canCheck = true;
        }
      });
      return canCheck;
    }
  
  });
});
    
</script>
</body>
</html>


สุธน ภักดี 29-02-2024 13:47
1







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