ขอคำแนะนำเกี่ยวกับการจัดการ checkbox ด้วย JQuery ค่ะ

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ขอคำแนะนำเกี่ยวกับการจัดการ checkbox ด้วย JQuery ค่ะ

ขอคำแนะนำเกี่ยวกับการจัดการ checkbox ด้วย JQuery ค่ะ

ขอคำแนะนำด้วยค่ะ

จากรูป(ด้านบน)ที่เห็น มีกลุ่มของคำถามต่างๆ ที่มี checkbox เป็น choice ให้เลือกค่ะ

แต่มีเงื่อนไขที่ว่าต้องคลิกเลือกแค่ 1 ค่าเท่านั้น (มีความจำเป็นต้องใช้ checkbox ค่ะ จริงๆคิดว่าถ้าเป็น radio น่าจะมีเหมาะกว่า)

ปัญหาอยู่ตรงที่ว่า

- ในขั้นตอนการแก้ไข เนื่องจากมีการเลือกคำตอบไว้แล้ว (select มาจาก database ค่ะ) ทำยังไงเราถึงจะคลิกเลือก choice อื่น โดยที่ตัวเลือกที่ถูกเลือกแล้วเปลี่ยนเป็น deselect

- และหลังจากนั้น ถ้าคลิกเลือก choice อื่น เรื่อยๆ ,,, choice ที่ถูกเลือกก่อนหน้านี้ก็จะเปลี่ยนเป็น deselect เพื่อให้เลือกได้แค่ choice เดียวเท่านั้นน่ะค่ะ

โครงสร้างฟอร์มนะคะ

<label>

<strong>Question 1</strong><br>

<input type="checkbox" name="choice1[]" > choice 1<br>

<input type="checkbox" name="choice1[]" > choice 2<br>

<input type="checkbox" name="choice1[]" checked > choice 3<br>

<br>

<strong>Question 2</strong><br>

<input type="checkbox" name="choice2[]" checked >choice 1<br>

<input type="checkbox" name="choice2[]" >choice 2<br>

<input type="checkbox" name="choice2[]" >choice 3<br>

<br>

<strong>Question 3</strong><br>

<input type="checkbox" name="choice3[]" >choice 1<br>

<input type="checkbox" name="choice3[]" checked >choice 2<br>

<input type="checkbox" name="choice3[]" >choice 3<br>

</label>

</p>

</form>

รบกวนขอแนวทางด้วยนะคะ

ขอบคุณมากค่ะ

Pookpik 13-02-2011 22:05:58

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

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

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ลองเอาตัวอย่างโค้ดนี้ไปประยุกต์ดู

ตัวอย่าง

โค้ดตัวอย่าง

<form name="form1" method="post" action="">
  <label> <strong>Question 1</strong><br>
    <input type="checkbox" class="ckb" name="choice1[]" >
    choice 1<br>
    <input type="checkbox" class="ckb" name="choice1[]" >
    choice 2<br>
    <input type="checkbox" class="ckb" name="choice1[]"  checked >
    choice 3<br>
    <br>
    <strong>Question 2</strong><br>
    <input type="checkbox" class="ckb" name="choice2[]"  checked >
    choice 1<br>
    <input type="checkbox" class="ckb" name="choice2[]" >
    choice 2<br>
    <input type="checkbox" class="ckb" name="choice2[]" >
    choice 3<br>
    <br>
    <strong>Question 3</strong><br>
    <input type="checkbox" class="ckb" name="choice3[]" >
    choice 1<br>
    <input type="checkbox" class="ckb" name="choice3[]"  checked >
    choice 2<br>
    <input type="checkbox" class="ckb" name="choice3[]" >
    choice 3<br>
  </label>
  </p>
</form>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
     $(".ckb").click(function(){
         var nameObj=$(this).attr("name");
         var objChk=$("input[name^='"+nameObj+"']");
         var indexThis=$("input[name^='"+nameObj+"']").index(this);
         objChk.each(function(i,k){
             if(i!=indexThis){
                 $("input[name^='"+nameObj+"']").eq(i).attr("checked",false)
             }else{
                 $("input[name^='"+nameObj+"']").eq(i).attr("checked",true)
             }
         });
     });
});
</script>

ninenik 14-02-2011

ความคิดเห็นที่ 2

ขอบคุณมากค่ะ ^____________^
ลองเอาโค๊ดที่คุณ Ninenik โพสต์ไว้ไปลองดูแล้วค่ะ ใช้งานได้ดีมากกกกๆๆค่ะ

ขอบคุณจริงๆค่ะ

สุขสันต์วันแห่งความรักนะคะ ^_____^

Pookpik 14-02-2011 14:27

ขอบคุณทุกการสนับสนุน