PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

23 July 2012 By


 โค้ดตัวอย่างการกำหนดให้สามารถเลือก 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>
 

Tags:: jquery radio





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