CSS - Hidden Checkbox - Highlight Label Round Image

Hello Experts,

I have a form that contains a number of checkboxes, company logos and company name.

I have all of these elements, checkbox, company logo and company name rapped in a label, here is my code so far -

  <li>
    <input name="RecordID2" type="hidden" id="RecordID2" value="xxxx" />
    <label for="PartnerBrand2"><img name="" width="32" height="32" alt="" src="" /> <span>
      <input name="PartnerBrand2" type="checkbox"  id="PartnerBrand2"value="Y" />
      Brand Name</span></label>
  </li>

Open in new window


My CSS for this is currently --

#SupplierSelect{float:left;	width:100%;}
#SupplierSelect ul{list-style:none; padding:0; margin:0;}
#SupplierSelect li{display:inline; float:left; width:149px; margin-left: 0px;}
#SupplierSelect img{width:109px; margin:10px; padding:4px;}
#SupplierSelect span{width:129px; float:left; color:#999;}
#SupplierSelect input[type="checkbox"]{margin-right:5px; margin-left:10px; background-color: #FFF; border: 1px solid #999;}

Open in new window


What I would like to do is hide the checbox, but when the logo or name is clicked on toggle the checkbox state and change the background colour of the label, so unchecked white, checked grey.

I was hoping to do this completely in CSS and HTML, not using JavaScript.

Appreciate any help with this, thanks
garethtnashAsked:
Who is Participating?
 
Julian HansenCommented:
Sure,

$(function(){
// First: setup an event handler for a click on a lable. You can refine this further by
// giving the lables you want clickable a certain class - say 'clickable' - and then do as follows
// $('label.clickable') ...

  $('label').click(function() {

    // Get the object taht was clicked - accessed through $(this) (refers to lable that was clicked
    // Get the 'for'' attribute - this is the same as the id of the checkbox you want to manipulate.

    var cb = $('#' + $(this).attr('for'));

    // Check if the checkbox is checked

	if (cb.is(':checked')) {

        // If it is use the .fadeIn function to show the checkbox

		cb.fadeIn();


        // Add a class to style a checked checkbox

		$(this).addClass('checked');
	}
	else {

        // Not checked so hide the checkbox and remove the class.

		cb.fadeOut();
		$(this).removeClass('checked');
	}
  });
});

Open in new window

For more info on how JQuery works
http://docs.jquery.com/Tutorials:How_jQuery_Works
0
 
Julian HansenCommented:
You can't do this with pure css.

If you want to change state based on a click you need to use javascript

Using jQuery this would be something like
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(function(){
  $('label').click(function() {
    var cb = $('#' + $(this).attr('for'));
	if (cb.is(':checked')) {
		cb.fadeIn();
		$(this).addClass('checked');
	}
	else {
		cb.fadeOut();
		$(this).removeClass('checked');
	}
  });
});
</script>
<style type="text/css">
.checked {
   background: blue;
   color: yellow;
}
input[type=checkbox] { display: none; };
#SupplierSelect{float:left;  width:100%;}
#SupplierSelect ul{list-style:none; padding:0; margin:0;}
#SupplierSelect li{display:inline; float:left; width:149px; margin-left: 0px;}
#SupplierSelect img{width:109px; margin:10px; padding:4px;}
#SupplierSelect span{width:129px; float:left; color:#999;}
#SupplierSelect input[type="checkbox"]{margin-right:5px; margin-left:10px; background-color: #FFF; border: 1px solid #999;}
</style>
</head>
<body>
<ul>
<li>
    <input name="RecordID2" type="hidden" id="RecordID2" value="xxxx" />
    <label for="PartnerBrand2"><img name="" width="32" height="32" alt="" src="" /> <span>
      <input name="PartnerBrand2" type="checkbox"  id="PartnerBrand2"value="Y" />
      Brand Name</span></label>
</li>
</ul>
</body>
</html>

Open in new window

0
 
garethtnashAuthor Commented:
Could you explain the JQuery please?

Thank you
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
garethtnashAuthor Commented:
Thanks, just one thing, i never want to show the checkox, it should remain hidden, but the label should change background colour - so i guess class?

Does the above do that?

Thanks
0
 
garethtnashAuthor Commented:
That is really neat thank you Julian :)
0
 
Julian HansenCommented:
To do it as you describe above you can do this
$(function(){
  $('label').click(function() {
    var cb = $('#' + $(this).attr('for'));
	if (cb.is(':checked')) {
		$(this).addClass('selected');
	}
	else {
		$(this).removeClass('selected');
	}
  });
});

Open in new window

0
 
garethtnashAuthor Commented:
Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.