Discussion Forums  >  WebViews and HTML for Mobile

Replies: 1    Views: 191

bioninja
Lost but trying
Profile
Posts: 71
Reg: Jul 08, 2012
Melbourne
2,860
Fourm Star
03/01/14 01:07 PM (8 years ago)

Multiple checkboxes in a single screen

Hi. I am trying to edit my HTML code so that an image changes when clicked/touched (basically going from an unlabelled form to a labelled form. I have found a bit of code that seems to do the trick nicely (using checkbox), problem is that when I try to add a second set of images to the same page, it overrides the first set of instructions, leaving me with two copies of the same image swap rather than two different image swaps. Does anyone know what I need to put between the two sets of code to stop the second set from overriding the first? Here is the code for one image swap: <span> <center> <input type="checkbox"/> <style type="text/css"> input[type="checkbox"] { content: url("../../../_Media/animal-labelled_med.jpeg"); width : 685px; height : 428px; } input[type="checkbox"]:checked { content: url("../../../_Media/animal-unlabelled_med.jpeg"); width : 685px; height : 428px; </style></center> </span>
 
SmugWimp
Smugger than thou...
Profile
Posts: 6316
Reg: Nov 07, 2012
Tamuning, GU
81,410
Fourm StarFourm StarFourm Star
like
03/01/14 06:24 PM (8 years ago)
Your solution isn't a Buzztouch solution so much as it is an HTML Solution. If you're off looking for ways to do this, just check in HTML/CSS resources... "try" seeing if naming the object into groups can help… It might, it might not. But it's worth a shot… <span> <center> <input type="checkbox" name="test1group"/> <style type="text/css"> input[type="checkbox"] { content: url("../../../_Media/animal-labelled_med.jpeg"); width : 685px; height : 428px; } input[type="checkbox"]:checked { content: url("../../../_Media/animal-unlabelled_med.jpeg"); width : 685px; height : 428px; </style></center> </span> <span> <center> <input type="checkbox" name="test2group"/> <style type="text/css"> input[type="checkbox"] { content: url("../../../_Media/mineral-labelled_med.jpeg"); width : 685px; height : 428px; } input[type="checkbox"]:checked { content: url("../../../_Media/mineral-unlabelled_med.jpeg"); width : 685px; height : 428px; </style></center> </span> If that doesn't work, try adding 'name=xxxx' along with the other checkboxes… input[type="checkbox" name="test1group"]:checked { …. good luck! Cheers! -- Smug
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.