newprogrammingfan Posted November 16, 2013 Share Posted November 16, 2013 (edited) I am new at javascript,and i was trying and trying with this but something is wrong,i wanna make the checked radio button red and green if not checked,or black no matter,the essence is to make red the selected radio button,so if i select one it becomes red,this is what i know how to do but when i select another,make the radio button which i selected and became red,change it back to black,or green...i was trying with green to see better if anything works cuz the defaulth is black.So here is the code that does't works yet. szc.php <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="query.js"></script> <style> .p1:hover { cursor:pointer; } </style> </head> <body> <form action="szc.php" method="post"> <label class="p1"><input type="radio" class="p1" name="rg" id="id1" value="anything1"><font id="L1">This?</font></label> <label class="p1"><input type="radio" class="p1" name="rg" id="id2" value="anything2"><font id="L2">Or this?</font></label> <input type="submit"/></form> </body> </html> query.js <script type="text/javascript"> window.onload = function(){ var id1 = document.getElementById("id1"); id1.onclick = function(){ if( id1.checked == true) { id1.style.color = "rgb(255, 0, 0)"; } if ( id1.checked == false) { id1.style.color = "rgb(0, 255, 0)"; } } var id2 = document.getElementById("id2"); id2.onclick = function(){ if( id2.checked == true) { L2.style.color = "rgb(255, 0, 0)"; } else { L2.style.color = "rgb(0, 255, 0)"; } } }; </script> Any help welcome! Edited November 16, 2013 by newprogrammingfan Quote Link to comment Share on other sites More sharing options...
Solution .josh Posted November 17, 2013 Solution Share Posted November 17, 2013 Couple notes here: 1) you shouldn't use font tags, as they are deprecated 2) it's okay to have an id for all your elements, but it's not really necessary most of the time 3) you shouldn't make your labels and inputs with the same class. Or rather, you should at least have a separate class to separate the two, so that you can more easily target just the labels or just the inputs. 4) this will be a lot easier with jQuery library (and what I will use below) In any case, here is one way to do it. You can see a working demo here. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> </head> <body> <form action="szc.php" method="post"> <label class="p1_label"><input type="radio" class="p1_radio" name="rg" value="anything1">This?</label> <label class="p1_label"><input type="radio" class="p1_radio" name="rg" value="anything2">Or this?</label> <input type="submit"/></form> <script type='text/javascript'> // make sure the document is loaded $(document).ready(function() { // listener for when radio button is clicked. listens for a click on anything with class p1_radio $('.p1_radio').on('click',function() { // select all elements with p1_radio, move up to the parent (the label tag) and change the color to green // this acts for changing the previous red one back to green $('.p1_radio').parent().css('color','green'); // now change the clicked one to red by selecting "this" as in "the one that was clicked", moving up to the parent // (the label tag its wrapped in) and changing the color to red $(this).parent().css('color','red'); }); }); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
newprogrammingfan Posted November 17, 2013 Author Share Posted November 17, 2013 Thank you very much! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.