jquery ui radio button validation works in Firefox, but errors in IE. . -


i have page uses jquery ui style radio buttons. when user selects one, jquery identify 1 selected , change ground color of corresponding div down below (ultimately, call .load fill div contents of dynamic page on site, now, coloring div fine).

it works peferctly in firefox, in internet explorer (or internet exploder call it), complains 'radio1' undefined.

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8" />     <title>jquery ui button - checkboxes</title>     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>     <link rel="stylesheet" href="/resources/demos/style.css" />     <script>          $(document).ready(function() {                 $(function() {                     $( "#radio" ).button();                     $( "#format" ).buttonset();                 });              $('input:radio').change(function(){                 if($(radio1).is(':checked')){                     $("#first").css("background-color","yellow");                     $("#second").css("background-color","white");                     $("#third").css("background-color","white");                 }else if($(radio2).is(':checked')){                     $("#first").css("background-color","white");                     $("#second").css("background-color","red");                     $("#third").css("background-color","white");                 }else if($(radio3).is(':checked')){                     $("#first").css("background-color","white");                     $("#second").css("background-color","white");                     $("#third").css("background-color","blue");                 } else {                     $("#first").css("background-color","white");                     $("#second").css("background-color","white");                     $("#third").css("background-color","white");                 }             });         });      </script>     <style>     #format { margin-top: 2em; }     </style> </head> <body>   <form>     <div id="format">         <input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">choice 1</label>         <input type="radio" id="radio2" name="radio" /><label for="radio2">choice 2</label>         <input type="radio" id="radio3" name="radio" /><label for="radio3">choice 3</label>     </div> </form>      <!-- following divs end being populated via ajax call based on checkbox selections -->     <!-- ultimately, checking given checkbox should toggle corresponding div -->     <div id="first">         first div     </div>     <div id="second">         second div     </div>     <div id="third">         third div     </div>  </body> </html> 

the selectors should use id selectors access radio buttons. have no idea how works in ff.

        $('input:radio').change(function(){             if($("#radio1").is(':checked')){                 $("#first").css("background-color","yellow");                 $("#second").css("background-color","white");                 $("#third").css("background-color","white");             }else if($("#radio2").is(':checked')){                 $("#first").css("background-color","white");                 $("#second").css("background-color","red");                 $("#third").css("background-color","white");             }else if($("#radio3").is(':checked')){                 $("#first").css("background-color","white");                 $("#second").css("background-color","white");                 $("#third").css("background-color","blue");             } else {                 $("#first").css("background-color","white");                 $("#second").css("background-color","white");                 $("#third").css("background-color","white");             }         }); 

Comments

Popular posts from this blog

ios - UICollectionView Self Sizing Cells with Auto Layout -

node.js - ldapjs - write after end error -

DOM Manipulation in Wordpress (and elsewhere) using php -