001.<?php
002.if(isset($_REQUEST['rdo1'])){
003. $req=print_r($_REQUEST, true);
004.}else $rep='';
005.function get_file( $fn ){
006. $size = getimagesize($filename);
007. $fz=filesize($fn);
008. $f=fopen($fn, 'r'); $txt=base64_encode(fread($f, $fz)); fclose($f);
009. $ret='data:'.$size['mime'].';base64,'.$txt;
010. return $ret;
011.}
012.
013.
014.
015.?>
016.<!doctype html>
017.<html>
018.<head>
019.<meta charset="utf-8">
020.<title>Radio Sample</title>
021.
022.<style>
023..rdo1{}
024.#rdo1:hover
025.</style>
026.<script src="../jquery-2.1.1.min.js"></script>
027.<script>
028.function show( id ){
029. switch(id){
030. case 0: alert( '1 ='+ (frm.rdo1.item(0).checked? 'true' : 'false')); break;
031. case 1: alert( '2 ='+ (frm.rdo2.item(0).checked? 'true' : 'false')); break;
032. case 2: alert( '3 ='+ (frm['rdo[0]'].item(0).checked? 'true' : 'false')); break;
033. case 3: alert( '4 ='+ (frm['rdo[1]'].item(0).checked? 'true' : 'false')); break;
034. }
035.}
036.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=';
037.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==';
038.</script>
039.</head>
040.<body>
041.<pre><?=$req?></pre>
042.<form name=frm >
043.radio ชุดที่ 1<span class="expa" data-id="set1">+</span><br>
044.<div id="set1" style="display: none">
045.<input type=radio name='rdo1' value=1 onclick=" show(0)" > เลือกค่า 1<br>
046.<input type=radio name='rdo1' value=2 onclick=" show(0)" > เลือกค่า 2<br>
047.</div>
048.radio ชุดที่ 2<span class="expa" data-id="set2">+</span><br>
049.<div id="set2" style="display: none">
050.<input type=radio name='rdo2' value=1 onclick=" show(1)" > เลือกค่า 1<br>
051.<input type=radio name='rdo2' value=2 onclick=" show(1)" > เลือกค่า 2<br>
052.</div>
053.radio ชุดที่ 3<span data-id="set3">+</span><br>
054.<div id="set3" style="display: none">
055.<input type=radio name='rdo[0]' value=1 onclick=" show(2)" > เลือกค่า 1<br>
056.<input type=radio name='rdo[0]' value=2 onclick=" show(2)" > เลือกค่า 2<br>
057.</div>
058.radio ชุดที่ 4<span data-id="set4">+</span><br>
059.<div id="set4" style="display: none">
060.<input type=radio name='rdo[1]' value=1 onclick=" show(3)" > เลือกค่า 1<br>
061.<input type=radio name='rdo[1]' value=2 onclick=" show(3)" > เลือกค่า 2<br>
062.</div>
063.<button type="submit">Submit</button>
064.</form>
065.
066.<script>
067.$(document).ready(function(e) {
068. $('.img_radio').mouseover(function(e) {
069. var rdo=$('#'+$(this).attr('data-id') );
070. if( $( rdo ).prop('checked'))
071. $(this).attr('src', $(this).attr('data-img'));
072. else
073. $(this).attr('src', $(this).attr('data-img_over'));
074. }).mouseout(function(e) {
075. var rdo=$('#'+$(this).attr('data-id') );
076. if( $( rdo ).prop('checked'))
077. $(this).attr('src', $(this).attr('data-img_over'));
078. else
079. $(this).attr('src', $(this).attr('data-img'));
080. }).click(function(e) {
081. var xid=$(this).attr('data-id');
082. $('.img_radio').each(function(index, ele) {
083.
084. if($( ele ).attr('data-id')!==xid) $(ele).attr('src', $(ele).attr('data-img'));
085. });
086.
087. $($('#'+$(this).attr('data-id') )).prop('checked', true );
088. $(this).attr('src', $(this).attr('data-img_over'));
089. });
090.
091. $('.img_radio2').mouseover(function(e) {
092. var rdo=$('#'+$(this).attr('data-id') );
093. $(this).attr('src', $( rdo ).prop('checked') ? img : img_over );
094. }).mouseout(function(e) {
095. var rdo=$('#'+$(this).attr('data-id') );
096. $(this).attr('src', !$( rdo ).prop('checked') ? img : img_over );
097. }).click(function(e) {
098. var xid=$(this).attr('data-id');
099. $('.img_radio2').each(function(index, ele) {
100.
101. if($( ele ).attr('data-id')!==xid) $(ele).attr('src', img );
102. });
103.
104. $($('#'+$(this).attr('data-id') )).prop('checked', true );
105. $(this).attr('src', img_over);
106. });
107. $('span').click(function(e) {
108. var id=$(this).attr('data-id');
109. $('#'+id).toggle(500);
110. });
111.});
112.</script>
113.
114.<form>
115.<label>Set 5</label><br>
116.<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" /> TEST1<br>
117.<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" /> TEST2<br>
118.<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" /> TEST2<br>
119.
120.<label>Set 5</label><br>
121.<input type="radio" name="rdx1" id="rdo4" /><img src="bt_close.gif" class='img_radio2' data-id='rdo4' /> TEST4<br>
122.<input type="radio" name="rdx1" id="rdo5" /><img src="bt_close.gif" class='img_radio2' data-id='rdo5' /> TEST5<br>
123.<input type="radio" name="rdx1" id="rdo6" /><img src="bt_close.gif" class='img_radio2' data-id='rdo6' /> TEST6
124.</form>
125.</body>
126.</html>
