อยากได้โค๊ด jQuery หรือ Ajax ที่เป็นเงื่อนไขของการเลือกปุ่ม radio แล้วรูปภาพจะเปลี่ยนไปตามสถานะที่เราเลือก (มีรูปภาพตัวอย่างให้ชมครับ)
ในกรณีที่หน้านี้เป็นไดนามิค ต้องมีการสร้างไฟล์เพื่อรับ-ส่งค่าอยู่แล้วครับCode (JavaScript)
$(":radio").click(function(){
var val = $(this).val();
$.post("test.php", { param : val },
function(data) {
$("div.img_show").html(data);
}
});
});
Date :
2012-08-08 15:50:21By :
Pine
แล้วถ้าเลือกปุ่ม radio (image1) แล้วในกรอบเส้นสีน้ำเงินจะเปลี่ยนเป็น (image1) หรือเปลี่ยนตามที่เราเลือกละครับ พอทำได้ไมครับ
Date :
2012-08-08 16:16:14By :
nattkhanesha
ตัวอย่างง่ายๆ นะครับ ไม่ใช่ไดนามิคCode (JavaScript)
$(":radio").click(function(){
var val = $(this).val();
$("div.img_show").html('<img src="path/' + val + ' alt="" />');
});
Date :
2012-08-08 16:28:13By :
Pine
ขอบคุณสำหรับโค๊ดนะครับ แต่ผมใส่โค๊ดไม่ถูกครับ รบกวนช่วยหน่อยนะครับCode (PHP) <!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>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="329" height="288" border="1">
<tr>
<td height="254" colspan="3"><img name="" src="" width="318" height="250" alt="" /></td>
</tr>
<tr>
<td width="102"><input type="radio" name="radio" id="image1" value="image1" />
<label for="image1">image1</label></td>
<td width="102"><input type="radio" name="radio" id="image2" value="image2" />
<label for="image2">image2</label></td>
<td width="102"><input type="radio" name="radio" id="image3" value="image3" />
<label for="image3">image3</label></td>
</tr>
</table>
</form>
</body>
</html>
ประวัติการแก้ไข
Date :
2012-08-08 16:40:36By :
nattkhanesha
Code (PHP) <!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>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(":radio").click(function(){
var val = $(this).val();
$("div.img_show").html('<img src="path/' + val + '" alt="" />');
});
});
</srcipt>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="329" height="288" border="1">
<tr>
<td height="254" colspan="3" class="show_img"><img name="" src="" width="318" height="250" alt="" /></td>
</tr>
<tr>
<td width="102"><input type="radio" name="radio" id="image1" value="image1.jpg" />
<label for="image1">image1</label></td>
<td width="102"><input type="radio" name="radio" id="image2" value="image2.jpg" />
<label for="image2">image2</label></td>
<td width="102"><input type="radio" name="radio" id="image3" value="image3.jpg" />
<label for="image3">image3</label></td>
</tr>
</table>
</form>
</body>
</html>
Date :
2012-08-10 00:46:27By :
Pine
Server 01
Load balance : Server 01
