Styled Radios using jQuery & CSS

JavaScript
1

Example

Have a play with both the checkbox and radio sections to notice the problem. :frowning:

I’m trying to remove the fakeradioed class from all radios that are unselected by another radio being selected.

	$(document).ready(function(){
		// check for what is/isn't already checked and match it on the fake ones
		$("input:radio").each( function() {
			(this.checked) ? $("#fake"+this.id).addClass('fakeradioed') : $("#fake"+this.id).removeClass('fakeradioed');
		});
		// function to 'check' the fake ones and their matching checkboxes
		$(".fakeradio").click(function(){
			($(this).hasClass('fakeradioed')) ? $(this).removeClass('fakeradioed') : $(this).addClass('fakeradioed');
			$(this.hash).trigger("click");
			return false;
		});
	});

Any suggestions on how i can fix this?

2

When a click event happens on one of your fake radio elements, remove the “checked” style from all of the members of that radiogroup. Then, add that style to the clicked element.

3 
// remove all the classes before new select
		$(".fakeradio").click(function(){
			$( 'ul a' ).removeClass( 'fakeradioed' );
		});

(:

4 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Styled Radios</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript">
	$(document).ready(function(){
		// check for what is/isn't already checked and match it on the fake ones
		$("input:checkbox").each( function() {
			(this.checked) ? $("#fake"+this.id).addClass('fakechecked') : $("#fake"+this.id).removeClass('fakechecked');
		});
		// function to 'check' the fake ones and their matching checkboxes
		$(".fakecheck").click(function(){
			($(this).hasClass('fakechecked')) ? $(this).removeClass('fakechecked') : $(this).addClass('fakechecked');
			$(this.hash).trigger("click");
			return false;
		});
		
		// check for what is/isn't already checked and match it on the fake ones
		$("input:radio").each( function() {
			(this.checked) ? $("#fake"+this.id).addClass('fakeradioed') : $("#fake"+this.id).removeClass('fakeradioed');
		});
		// function to 'check' the fake ones and their matching checkboxes
		$(".fakeradio").click(function(){
			$('.fakeradioed').removeClass('fakeradioed');
			($(this).hasClass('fakeradioed')) ? $(this).removeClass('fakeradioed') : $(this).addClass('fakeradioed');
			$(this.hash).trigger("click");
			return false;
		});
		
	});
</script>

<style type="text/css">
body {background:#000;}

#contact form {
width:1000px;
margin:0;
padding-top:55px;
}

#contact form fieldset {
border:none;
margin:10px 25px 0 0;
}

.name { float:left;}

#contact form label {
font-family: "Georgia";
text-transform: uppercase;
letter-spacing:1px;
font-size:14px;
color:#fff8d4;
display:block;
margin:0;
padding:0 0 7px 0;
}

#contact form ul { margin:0; padding:0; }
#contact form .fakecheck {
font-family: "Trebuchet MS";
font-size:12px;
color:#fff;
text-decoration: none;
outline: none;
background: url(checkbox.gif) no-repeat top left;
height:19px;
width: 213px;
display: block;
padding: 0px 0px 0px 33px;
margin:0 0 9px 0;
line-height:20px;
}
#contact form .fakecheck:hover {
color:#bee9ba;
}
#contact form .fakechecked, #contact form .fakechecked:hover {
background: url(checkbox.gif) no-repeat bottom left;
color:#4abc54;
}


#contact form ul { margin:0; padding:0; }
#contact form .fakeradio {
font-family: "Trebuchet MS";
font-size:12px;
color:#fff;
text-decoration: none;
outline: none;
background: url(checkbox.gif) no-repeat top left;
height:19px;
width: 213px;
display: block;
padding: 0px 0px 0px 33px;
margin:0 0 9px 0;
line-height:20px;
}
#contact form .fakeradio:hover {
color:#bee9ba;
}
#contact form .fakeradioed, #contact form .fakeradioed:hover {
background: url(checkbox.gif) no-repeat bottom left;
color:#4abc54;
}
</style>

</head>
<body>

<div id="contact">
	<form>
		<fieldset class="name"><label for="service">Checkbox</label>
			<ul>
				<li><a href="#coke" class="fakecheck" id="fakecoke"> Coke</a></li>
				<li><a href="#pepsi" class="fakecheck" id="fakepepsi"> Pepsi</a></li>
				<li><a href="#irnbru" class="fakecheck" id="fakeirnbru"> Irn Bru</a></li>

				<li><a href="#water" class="fakecheck" id="fakewater"> Water</a></li>
			</ul>

			<input type="checkbox" name="coke" id="coke" />
			<input type="checkbox" name="pepsi" id="pepsi" />
			<input type="checkbox" name="irnbru" id="irnbru" />
			<input type="checkbox" name="water" id="water" />

		</fieldset>

		<fieldset class="name"><label for="budget">Radio</label>
			<ul>
				<li><a href="#dotcom1" class="fakeradio" id="fakedotcom1"> Turtle</a></li>
				<li><a href="#dotnet1" class="fakeradio" id="fakedotnet1"> Cat</a></li>
				<li><a href="#dotbiz1" class="fakeradio" id="fakedotbiz1"> Dog</a></li>

				<li><a href="#dotinfo1" class="fakeradio" id="fakedotinfo1"> Fish</a></li>
			</ul>

			<input type="radio" name="projectedbudget" id="dotcom1" />
			<input type="radio" name="projectedbudget" id="dotnet1" />
			<input type="radio" name="projectedbudget" id="dotbiz1" />
			<input type="radio" name="projectedbudget" id="dotinfo1" />

		</fieldset>

	</form>

</div>
</body>