PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

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

 

 
 
ขอคำแนะนำด้วยค่ะ
จากรูป(ด้านบน)ที่เห็น มีกลุ่มของคำถามต่างๆ ที่มี checkbox เป็น choice ให้เลือกค่ะ
แต่มีเงื่อนไขที่ว่าต้องคลิกเลือกแค่ 1 ค่าเท่านั้น (มีความจำเป็นต้องใช้ checkbox ค่ะ จริงๆคิดว่าถ้าเป็น radio น่าจะมีเหมาะกว่า)
 
ปัญหาอยู่ตรงที่ว่า 
- ในขั้นตอนการแก้ไข เนื่องจากมีการเลือกคำตอบไว้แล้ว (select มาจาก database ค่ะ) ทำยังไงเราถึงจะคลิกเลือก choice อื่น โดยที่ตัวเลือกที่ถูกเลือกแล้วเปลี่ยนเป็น deselect 
- และหลังจากนั้น ถ้าคลิกเลือก choice อื่น เรื่อยๆ ,,, choice ที่ถูกเลือกก่อนหน้านี้ก็จะเปลี่ยนเป็น deselect เพื่อให้เลือกได้แค่ choice เดียวเท่านั้นน่ะค่ะ
 
โครงสร้างฟอร์มนะคะ 
 
<form name="form1" method="post" action="">
        <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 IP: 223.207.172.xxx วันที่: 13-02-2011 เวลา: 22:05:58

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 2

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

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

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

 



โดย:  Pookpik IP: 223.206.198.xxx วันที่: 14-02-2011 เวลา: 14:27:01
 ความคิดเห็นที่ 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 IP: 183.89.15.xxx วันที่: 14-02-2011