Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > PHP > PHP Forum > เปลี่ยน radio button เป็นรูปอ่ะครับ ช่วยดูให้หน่อย



 

เปลี่ยน radio button เป็นรูปอ่ะครับ ช่วยดูให้หน่อย

 



Topic : 113209



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์




Code
<style>
input[type=radio] {
    display:none; 
    margin:10px;
}

input[type=radio] + label {
    display:inline-block;
	background-image:url(images/iPhone.gif);
	width:100px;
	height:100px;
}

input[type=radio]:checked + label { 
	background-image:url(images/iPhone2.gif);
	width:100px;
	height:100px;
}
</style>


และ

Code
<input type="radio" id="radio1" name="radios" value="all" checked>
   <label for="radio1">iPhone</label>
<input type="radio" id="radio2" name="radios"value="false">
   <label for="radio2">Galaxy S IV</label>
<input type="radio" id="radio3" name="radios" value="true">
   <label for="radio3">Nexus S</label>



คือผมอยากจะเอารูปแทน radio อ่ะครับโดยที่
radio1 เป็นรูปของ iPhone.gif (เมื่อไม่ check จะเป็นอีกรูปหนึ่ง iPhone2.gif)
radio2 เป็นรูปของ Galaxy.gif (เมื่อไม่ check จะเป็นอีกรูปหนึ่ง Galaxy2.gif)
radio3 เป็นรูปของ Nexus.gif (เมื่อไม่ check จะเป็นอีกรูปหนึ่ง Nexus2.gif)

ช่วยหน่อยนะครับ



Tag : PHP, HTML/CSS, JavaScript






Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2014-12-13 06:26:26 By : judas78 View : 2634 Reply : 7
 

 

No. 1



โพสกระทู้ ( 9,586 )
บทความ ( 2 )



สถานะออฟไลน์


ลองดูเป็นตัวอย่างนะครับ
Code (JavaScript)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Radio Sample</title>
<script src="../jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(e) {
	$('.img_radio').mouseover(function(e) {
		var rdo=$('#'+$(this).attr('data-id') );
		if( $( rdo ).prop('checked'))
			$(this).attr('src', $(this).attr('data-img'));
		else
			$(this).attr('src', $(this).attr('data-img_over'));
	}).mouseout(function(e) {
		var rdo=$('#'+$(this).attr('data-id') );
		if( $( rdo ).prop('checked'))
			$(this).attr('src', $(this).attr('data-img_over'));
		else
			$(this).attr('src', $(this).attr('data-img'));
	}).click(function(e) {
		var xid=$(this).attr('data-id');
		$('.img_radio').each(function(index, ele) {
			//clear all check not this
			if($( ele ).attr('data-id')!==xid) $(ele).attr('src', $(ele).attr('data-img'));
		});
		// set_checke
		$($('#'+$(this).attr('data-id') )).prop('checked', true );
		$(this).attr('src', $(this).attr('data-img_over'));
	});
});
</script>
</head>

<body>

<form>
<input type="radio" name="rdo" id="rdo1" />
<img src="bt_close.gif" class='img_radio' data-id='rdo1' 
	data-img="bt_close.gif" data-img_over="bt_close_over.gif" />&nbsp;TEST1<br>
<input type="radio" name="rdo" id="rdo2" />
<img src="bt_close.gif" class='img_radio' data-id='rdo2' 
	data-img="bt_close.gif" data-img_over="bt_close_over.gif" />&nbsp;TEST2<br>
<input type="radio" name="rdo" id="rdo3" />
<img src="bt_close.gif" class='img_radio' data-id='rdo3' 
	data-img="bt_close.gif" data-img_over="bt_close_over.gif" />&nbsp;TEST2
</form>
</body>
</html>


สำหรับ ป่ม radio เมื่อทดสอบแล้ว ให้ใส่ style="display: none" เพื่อซ่อน ไม่โชว์




ประวัติการแก้ไข
2014-12-13 07:51:27
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-13 07:49:51 By : Chaidhanan
 


 

No. 2



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-14 07:46:21 By : judas78
 

 

No. 3



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


Code (JavaScript)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Radio Sample</title>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(e) {
	$('.img_radio').mouseover(function(e) {
		var rdo=$('#'+$(this).attr('data-id') );
		var soup=$('#'+$(this).attr('data-id') );
		if( $( rdo ).prop('checked'))
			$(this).attr('src', $(this).attr('data-img_over'));
		else if( $( soup ).prop('checked'))
			$(this).attr('src', $(this).attr('data-img_over'));
		else 
			$(this).attr('src', $(this).attr('data-img_over'));
	}).mouseout(function(e) {
		var rdo=$('#'+$(this).attr('data-id') );
		var soup=$('#'+$(this).attr('data-id') );
		if( $( rdo ).prop('checked'))
			$(this).attr('src', $(this).attr('data-img_over'));
		else if( $( soup ).prop('checked'))
			$(this).attr('src', $(this).attr('data-img_over'));
		else
			$(this).attr('src', $(this).attr('data-img'));
	}).click(function(e) {
		var xid=$(this).attr('data-id');
		$('.img_radio').each(function(index, ele) {
			//clear all check not this
			if($( ele ).attr('data-id')!==xid) $(ele).attr('src', $(ele).attr('data-img'));
		});
		// set_checke
		$($('#'+$(this).attr('data-id') )).prop('checked', true );
		$(this).attr('src', $(this).attr('data-img'));
	});
	
});
</script>
</head>

<body>

<form>
<input type="radio" name="rdo" id="rdo1"/>
<img src="images/bt_close.gif" class='img_radio' data-id='rdo1' 
	data-img="images/bt_close.gif" data-img_over="images/bt_close_over.gif"/>
<input type="radio" name="rdo" id="rdo2"/>
<img src="images/bt_close.gif" class='img_radio' data-id='rdo2' 
	data-img="images/bt_close.gif" data-img_over="images/bt_close_over.gif" />
<input type="radio" name="rdo" id="rdo3"/>
<img src="images/bt_close.gif" class='img_radio' data-id='rdo3' 
	data-img="images/bt_close.gif" data-img_over="images/bt_close_over.gif" />

//radio อีกชุดหนึ่งครับ
<input type="radio" name="soup" id="soup1"/>
<img src="images/bt_close.gif" class='img_radio' data-id='soup1' 
	data-img="images/bt_close.gif" data-img_over="images/bt_close_over.gif"/>
<input type="radio" name="soup" id="soup2"/>
<img src="images/bt_close.gif" class='img_radio' data-id='soup2' 
	data-img="images/bt_close.gif" data-img_over="images/bt_close_over.gif" />
<input type="radio" name="soup" id="soup3"/>
<img src="images/bt_close.gif" class='img_radio' data-id='soup3' 
	data-img="images/bt_close.gif" data-img_over="images/bt_close_over.gif" />

</form>
</body>
</html>


คือว่า radio ทั้งสองชุดภาพมันพ่วงกันอยู่อ่ะครับต้องแก้ยังไง
แบบว่าพอเราคลิกที่ radio ชุดที่ 1... ภาพในชุดที่ 2 ก็เปลี่ยนเป็น data-img ไปด้วย แต่ radio ยังเช็คที่เดิมอยู่ ในทางกลับกัน
พอเราคลิกที่ radio ชุดที่ 2... ภาพในชุดที่ 1 ก็เปลี่ยนเป็น data-img ไปด้วย แต่ radio ยังเช็คตรงอยู่ เพียงแต่ภาพไม่ควรเปลี่ยนก็เปลี่ยนครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-16 06:22:56 By : judas78
 


 

No. 4



โพสกระทู้ ( 1,819 )
บทความ ( 20 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 3 เขียนโดย : judas78 เมื่อวันที่ 2014-12-16 06:22:56
รายละเอียดของการตอบ ::
ใช้ CSS เหมือนเดิมดีแล้วครับ จะได้ไม่ต้องเขียน JavaScript มากมาย

แค่เปลี่ยนมาใช้ class และใช้ <label> ครอบ radio และรูปภาพ และ text
มันจะได้ไม่ต้องกำหนด for และ id ของ radio



<style>
.checker {
    display:none; 
}

.checker + .checker-placeholder {
	display:inline-block;
	width:100px;
	height:100px;
}

.checker-placeholder.iphone {
	background-image: url(images/iPhone.gif);
}
.checker:checked + .checker-placeholder.iphone {
	background-image: url(images/iPhone2.gif);
}

.checker-placeholder.galaxy {
	background-image: url(images/Galaxy.gif);
}
.checker:checked + .checker-placeholder.galaxy {
	background-image: url(images/Galaxy2.gif);
}

.checker-placeholder.nexus {
	background-image: url(images/Nexus.gif);
}
.checker:checked + .checker-placeholder.nexus {
	background-image: url(images/Nexus2.gif);
}
</style>
...
...
...
...
...
<label>
	<input class="checker" type="radio" name="radios" value="all" checked>
	<span class="checker-placeholder iphone"></span>
	iPhone
</label>
<label>
	<input class="checker" type="radio" name="radios" value="false">
	<span class="checker-placeholder galaxy"></span>
	Galaxy S IV
</label>
<label>
	<input class="checker" type="radio" name="radios" value="true">
	<span class="checker-placeholder nexus"></span>
	Nexus S
</label>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-16 06:48:39 By : phpinfo()
 


 

No. 5



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-18 07:35:11 By : judas78
 


 

No. 6



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


รบกวนอีกนิดหนึ่งครับ
คือพอดีรูปที่นำมาใส่ในโค๊ดนี้ถ้าหากเป็นรูปที่ใหญ่กว่ามันก็จะแสดงไม่เต็มครับ คือมันจะตัดมาตามขนาดที่เรากำหนด
width:100px;
height:100px;
แทนที่จะย่อขนาดเอาครับ
ต้องแก้ยังไงบ้าง เปลี่ยนเป็น auto ก็ไม่ได้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-24 07:12:11 By : judas78
 


 

No. 7



โพสกระทู้ ( 19 )
บทความ ( 0 )



สถานะออฟไลน์


อ๋อ...มันเป็น background-image: เนอะมันเลยแสดงภาพไม่เต็ม
แล้วจะแก้ยังไงหล่ะที่นี้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-12-25 06:58:17 By : judas78
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : เปลี่ยน radio button เป็นรูปอ่ะครับ ช่วยดูให้หน่อย
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
 Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่