PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ถ้าจะใช้วิธีแบบในตัวอย่างนี้ปรับเปน radio button ทำยังไงค่ะ

ถ้าจะใช้วิธีแบบในตัวอย่างนี้ปรับเปน radio button ทำยังไงค่ะ
โดย:  Zippy IP: 203.148.221.xxx วันที่: 16-02-2011 เวลา: 22:02:33

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

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


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


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

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



โดย:  Zippy IP: 203.148.221.xxx วันที่: 16-02-2011 เวลา: 22:53:59
 ความคิดเห็นที่ 1

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

ตัวอย่าง

หัวข้อทดสอบที่ 1 หัวข้อทดสอบที่ 2 หัวข้อทดสอบท3 หัวข้อทดสอบที่ 4


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

<!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>radio accordion</title>
<style type="text/css">  
/* สร้าง css class ชื่อ iTopic สำหรับ หัวข้อเมนู */
.iTopic{
	font-size:12px;
	display:block;
	float:left;
	height:22px;
	font-weight:bold;
	color:#333;
	padding-left:25px;
	padding-bottom:3px;
	line-height:18px;
/*	cursor:pointer;*/
	width:400px;
	clear:both;
	border:1px solid #CCCCCC;
}
/* สร้าง css class ชื่อ iDetail สำหรับ รายละเอียด */
.iDetail{
	font-size:12px;
	display:none;
	clear:both;
	float:left;
	font-weight:normal;
	color:#333333;
	padding-left:25px;
	padding-bottom:10px;
	line-height:18px;
	background-color:#E9EFEF;
	width:400px;
}
</style>  
</head>

<body>


<div class="iMenu">
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบที่ 1</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1
รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1 รายละเอียดหัวข้อทดสอบที่ 1</label>
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบที่ 2</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2
รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2 รายละเอียดหัวข้อทดสอบที่ 2</label>
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบท3</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3
รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3 รายละเอียดหัวข้อทดสอบที่ 3</label>
<span class="iTopic">
<input type="radio" class="iRadio_css" name="radio" id="radio" value="radio" />
หัวข้อทดสอบที่ 4</span>
<label class="iDetail">รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4
รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4 รายละเอียดหัวข้อทดสอบที่ 4</label>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">   
$(function(){   
    $(".iRadio_css").click(function(){   
			$(this).parent(".iTopic").next("label.iDetail").slideToggle("fast");
			$(this).parent(".iTopic").next("label.iDetail").siblings("label").slideUp('fast');
    });   
});   
</script> 

</body>
</html>

 



โดย:  Ninenik IP: 124.122.124.xxx วันที่: 16-02-2011