Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,036

HOME > PHP > PHP Forum > javascript Radio Button ที่เป็นการวงกลม หรือ สี่เหลี่ยม รูปที่เค้าต้องการได้ใหมครับ

javascript Radio Button ที่เป็นการวงกลม หรือ สี่เหลี่ยม รูปที่เค้าต้องการได้ใหมครับ

เริ่มหัวข้อใหม่

Hyskoa

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

คือปกติ Radio Button จะเป็นจุดใน Radio Button ใช่ใหมครับ แต่ผมอยากใส่เป็นรูปให้เลือกแทน แล้วกดที่รูปแล้วเป็นการ check พอจะมี javascript ประมาณนี้ใหมครับ

Tag : PHP, MySQL

Date : 2014-12-15 19:11:43

By : tangsupap

View : 3362

Reply : 2

No. 1

meannerss

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

ลองๆแต่งดูด้วย css ครับ

http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/

Date : 2014-12-15 19:39:27

By : meannerss

No. 2

Chaidhanan

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

css ไม่คล่องครับ ผมใช้แบบนี้ ก็เอาไว้เป็นทางเลือก เป็นแนวคิดก็แล้วกันนะครับ เพื่อทำอย่างอื่น

Code (PHP)

<?php
if(isset($_REQUEST['rdo1'])){
	$req=print_r($_REQUEST, true);
}else $rep='';
function get_file( $fn ){
	$size = getimagesize($filename); 
	$fz=filesize($fn);
	$f=fopen($fn, 'r'); $txt=base64_encode(fread($f, $fz)); fclose($f);
	$ret='data:'.$size['mime'].';base64,'.$txt;
	return  $ret;
}
//$img=get_file( 'bt_close.gif');
//$img_over=get_file( 'bt_close_over.gif');

?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Radio Sample</title>

<style>
.rdo1{}
#rdo1:hover
</style>
<script src="../jquery-2.1.1.min.js"></script>
<script>
function show( id ){
	switch(id){
	case 0: alert( '1 ='+ (frm.rdo1.item(0).checked? 'true' : 'false')); break;
	case 1: alert( '2 ='+ (frm.rdo2.item(0).checked? 'true' : 'false')); break;
	case 2: alert( '3 ='+ (frm['rdo[0]'].item(0).checked? 'true' : 'false')); break;
	case 3: alert( '4 ='+ (frm['rdo[1]'].item(0).checked? 'true' : 'false')); break;
	}
}
var img='data:;base64,R0lGODlhFQAVAPcAAP+gev+LYv+OZv+Ubf+WcP+efP+gfv+FXP+NZv+OaP+QbP+Tb/+Vcf+WdP52UP52Uf58Vv5/Wv6BXv6EYP6GZP'+ '+GZf+JZ/+Jaf+MbP+afP+afv+cfvxrR/5/X/18Xv+CYv6FZv+RdP+Tef+VfP+WfPZhQfdjQ/dlRfhqSvdqS/ZsTvZsT/ZtUfZuUfVuUv97X/99X/9+Yf+BZf1'+ '+ZP2DZ/+Daf+Lcf+LdP+PeP+Sef+Qet1IL9tJMfNYOvJXOvFnUPRsUvNqU/RtVP9zWf9zWv90Wv1xWv93Xf13Xfx3Yf+Ebf+GctZAKtRAKuVJMNpGL95K'+ 'MtpKM9lJM9xNNtpMNtpNNthLN9NJNtJJNthPOdZPO9NOPNJOPM9RQM1RQP9pU/9qU/BkTv9rVfBjUP1rVvFnUvxxXP98aP+Db/+CcfpJNck8K/9POu1KN'+ '8o/L8xDMspBMf9SP89ENMtCM8pDM/tUQexPPcxGNv9XRPpWQ81JOe5UQ89MO85KOv9cSe5VRM5KO/9cSv9dSvxcSu1XRv9fTe5aSO1ZSOhYSP9iU'+ 'P9kUO9cS+9eS/9kUf1kUfthUP9kUv9lUu5dTe5eTdJTRP9lU/1mU/xjUvBgTv9lVPxkU/9mVfxlVPxmVf9oV/xnVv9qWPxoV+thUf9qWfxqWP9rWtNZS'+ '/9sW/9tXf9uXf9vXf9uXv9vXv9vX/9wX/9wYP9xYP9xYf9zYv90Yv9zY/90Y/90ZP92ZP91Zf92Zv94aP95aP95af95av96a/97bP98bf99bv9+b/9/cP+AcP'+ '+Acf+Bcf+Bcv+Cc/+DdP+Ddf+Edf+Fdv+Fd/+Gd/+HeP+Ief+Iev+KfP+LfP+Lff+Mfv+Mf/+Nf/+NgP+OgP+Ogf+Pgv+Qg/+RhP+Shf+Thv+Uh/+UiP+Wiv'+ '+Yjf+Zjf+Zjv+dkv+ek/+flP+glf+kmv+lm/+onv+pn/+qoP+upf+wpv+yqf+zq/+4sP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ 'CH5BAEAAPQALAAAAAAVABUAAAj/AOkJHEiwoEGB3qwp+6VLFi1XrVKV2rQpkaA8ogZ+exev3Tly4bhloxZt2TFguVJd+mNKIDZ58+CpOzcuXDdt1aIxG'+ '9YrVqhDcwQ2cwePHU1v16ApK+aLl61XpzotuiNwWLp16ARKWyZMF61UpwRm0iRJj0Bf5cyRG8jUFitQAxs5mtRHYC5v4sBtG7irlqqBiiJZwgRIIK5q3LRR'+ 'czbw1kAwX8SQGcNHIKpm1KbpPFbwSJEhRIyU4SJw1DBmz5wlM5ZmYA0ZMWC8QBJki8BKvYwlS4asNUEMFyp88CBEi8BCtH4NO0ZsYI6BCxRY6OAii8'+ 'BAqXL5CjZQxwgNAwkkkpCwoopAPJ5i5Rq4BAeJDQYGCoiQIorAOIlKwRK4C80NERkUAIBAAUBwAg8CseEHJKOs4sosZyhhQwgNMDAAAgc4UMITAqlR'+ 'xyCPcPIJKWYkMQMNIFAwQQQPcOBDEwIh0oYdexByiCGMhPEDECy0oAIKJvTghBcDUbKGG3DQ8YYcWFxhBRVTSAHFDkx0cdCVVwYEADs=';
var img_over='data:;base64,R0lGODlhFQAVAPcAAK9mc7Nrd7JsebNuerNyfrFndbFpd7NreapmdLFserJvfLN0gahjc7Bre7JtfKpod7Jxf7N1g7F0grN2hKpic6dhcq9oea9'+ 'pe7Fsfa9rfKxqerFuf6pqeapufbN3hqljdqlkd7Bsf65sfqpsfK1wgLF1hbJ4iK9pfaBgcq9qf69tgbBugqZrfKpvgK9zhbB2h6lle61ofq5pf65vg6hvgaZugK50hrJ5'+ 'i693ia1nfqdlfK5rgaxqgatqgJlgc69vhK1xhrF2iqhwg691iahxhKdxg693irJ6ja94i7F6ja1pga1qg5ZecphgdKxuhK5whpljdphidZhkd6dxhadyhbF6jq95jJZbc'+ 'qdmf6JjfKtqg6xshatrhK5xiK5ziphlea52jK11i7B4jadyhrF5jrJ8kaZ0h7F8kKNkfpRbcqZngaVngaxth6tthq1viK1wia1xiq51jLF7kZZoe655j7J9k7F8kpZbdK'+ 'RlgKVngq1yi65zjZdme5Nlea95kbB7kq97kaNrha50j61zjq1zjZZnfJVnfK96krF9lZVbd652ka11kK96lJRofbF+l699la52krB9l69+l6+BmI9YdZNceZBad5N'+ 'deq55la97l7B8mK98l7F/mZpyh5Fdeq99mZVqgrB/mq9/mbGGnpVogrCAm6+Bm5VlgrB/nK9+m7CAna+BnLCCnbCDnrCEn7GGobCFoK+Dn7GHo7KK'+ 'pbGJpLGKpbGLprGNp7KPqLKPq7KQrLKUr7OVsrKVsbOWs7OZtbSbt7SbubScuv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'+ 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAA'+ 'MMALAAAAAAVABUAAAj/AIcJHEiwoEGBuEZNegSIDh0wYMKEAQLESQ8YgQbi+gVs1y1ar1yxWmVKVCRGivRwyXJKIKxgwnrhqiULVixVqlJ9wqSIUBs0'+ 'lASG4uVLV61XrUp9yoQJkqJBcNxwwWNJoKRcuWoJXIppEaE3bgRu0ZLHk0BGs2zJGshzzxs2A5eQNTvMzytZrlQNFKQnrEAlctdcEuinlUhUmgbCGRgjhx'+ 'IeagYPi1MKZ6pNmArukBGjM5ZKAr1ECkV6EyM/A3+oSHHiRIzPArsw4hSKU6RHBVeEyHDhgo5EAp8cisSJk6OBYgZuwNDgAgzgw2bQQeSI00A5ZIIMd'+ 'JDAAog7AlUghfmDaKCdMlVueBgowMCHKwJFDKliR2AdO2eOqI8gMEABCvANk4ELRlRxxhlVVJHEDSZMsAABA/gHoEAakGCDEUhYgQQSOLxQggQQKN'+ 'AeABWkIZAZLNRQBBVjTEGEEDS00MEIHDyAAAMokDJQJ33MYUgjhhRSCB9fSAFFFE34wAQoBzXZZEAAOw==';
</script>
</head>
<body>
<pre><?=$req?></pre>
<form name=frm >
radio ชุดที่ 1<span class="expa" data-id="set1">+</span><br>
<div id="set1" style="display: none">
<input type=radio name='rdo1' value=1 onclick=" show(0)" > เลือกค่า 1<br>
<input type=radio name='rdo1' value=2 onclick=" show(0)" > เลือกค่า 2<br>
</div>
radio ชุดที่ 2<span class="expa" data-id="set2">+</span><br>
<div id="set2" style="display: none">
<input type=radio name='rdo2' value=1 onclick=" show(1)" > เลือกค่า 1<br>
<input type=radio name='rdo2' value=2 onclick=" show(1)" > เลือกค่า 2<br>
</div>
radio ชุดที่ 3<span data-id="set3">+</span><br>
<div id="set3" style="display: none">
<input type=radio name='rdo[0]' value=1 onclick=" show(2)" > เลือกค่า 1<br>
<input type=radio name='rdo[0]' value=2 onclick=" show(2)"  > เลือกค่า 2<br>
</div>
radio ชุดที่ 4<span data-id="set4">+</span><br>
<div id="set4" style="display: none">
<input type=radio name='rdo[1]' value=1 onclick=" show(3)"  > เลือกค่า 1<br>
<input type=radio name='rdo[1]' value=2 onclick=" show(3)"  > เลือกค่า 2<br>
</div>
<button type="submit">Submit</button>
</form>

<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'));
	});
	//*/
	$('.img_radio2').mouseover(function(e) {
		var rdo=$('#'+$(this).attr('data-id') );
		$(this).attr('src', $( rdo ).prop('checked') ? img : img_over );
	}).mouseout(function(e) {
		var rdo=$('#'+$(this).attr('data-id') );
		$(this).attr('src', !$( rdo ).prop('checked') ? img : img_over );
	}).click(function(e) {
		var xid=$(this).attr('data-id');
		$('.img_radio2').each(function(index, ele) {
			//clear all check not this
			if($( ele ).attr('data-id')!==xid) $(ele).attr('src', img );
		});
		// set_checke
		$($('#'+$(this).attr('data-id') )).prop('checked', true );
		$(this).attr('src', img_over);
	});
	$('span').click(function(e) {
		var id=$(this).attr('data-id');
		$('#'+id).toggle(500);
	});
});
</script>

<form>
<label>Set 5</label><br>
<input type="radio" name="rdx" 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="rdx" 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="rdx" 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<br>

<label>Set 5</label><br>
<input type="radio" name="rdx1" id="rdo4" /><img src="bt_close.gif" class='img_radio2' data-id='rdo4' />&nbsp;TEST4<br>
<input type="radio" name="rdx1" id="rdo5" /><img src="bt_close.gif" class='img_radio2' data-id='rdo5' />&nbsp;TEST5<br>
<input type="radio" name="rdx1" id="rdo6" /><img src="bt_close.gif" class='img_radio2' data-id='rdo6' />&nbsp;TEST6
</form>
</body>
</html>

Date : 2014-12-15 22:48:47

By : Chaidhanan

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : javascript Radio Button ที่เป็นการวงกลม หรือ สี่เหลี่ยม รูปที่เค้าต้องการได้ใหมครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

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

Load balance : Server 03