คลิกข้อความ เพื่อเลือก input type radio อย่างง่าย ด้วย jQuery

23 July 2012 By Ninenik Narkdee
jquery radio

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



 โค้ดตัวอย่างการกำหนดให้สามารถเลือก input type radio จากการคลิกที่ข้อความ

อ้างอิงด้านหลัง input type radio นั้นๆ 
 
ตัวอย่าง
 
ข้อความสำหรับทดสอบที่ 1
ข้อความสำหรับทดสอบที่ 2
ข้อความสำหรับทดสอบที่ 3
ข้อความสำหรับทดสอบที่ 4
ข้อความสำหรับทดสอบที่ 5
 
ตัวอย่างโค้ดทั้งหมด
 
<!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>
</head>

<body>
<style type="text/css">
.text_for_radio{
	cursor:pointer;	
}
</style>
<br />
<br />
<div style="position:relative;margin:auto;width:700px;">
  <form id="form1" name="form1" method="post" action="">
    <input type="radio" name="choice" id="radio" value="1" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  1</span><br />
    <input type="radio" name="choice" id="radio" value="2" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  2</span><br />
    <input type="radio" name="choice" id="radio" value="3" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  3</span><br />
    <input type="radio" name="choice" id="radio" value="4" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  4</span><br />
    <input type="radio" name="choice" id="radio" value="5" />
    <span class="text_for_radio">ข้อความสำหรับทดสอบที่  5</span><br />
  </form>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript">
$(function(){
	$(".text_for_radio").click(function(){
		$(this).prev("input[name='choice']").attr("checked","checked");
	});
});
</script>
</body>
</html>
 


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





Tags:: jquery radio







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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ