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

23 July 2012 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

jquery radio

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

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

อ้างอิงด้านหลัง input type radio นั้นๆ

ตัวอย่าง

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

<!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:: radio jquery

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

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

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน