?
Solved

CSS - Hidden Checkbox - Highlight Label Round Image

Posted on 2012-09-07
7
Medium Priority
?
453 Views
Last Modified: 2012-09-07
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
0
Comment
Question by:garethtnash
  • 4
  • 3
7 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38375792
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
 

Author Comment

by:garethtnash
ID: 38375877
Could you explain the JQuery please?

Thank you
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38375899
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:garethtnash
ID: 38375975
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
 

Author Closing Comment

by:garethtnash
ID: 38376262
That is really neat thank you Julian :)
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38376519
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
 

Author Comment

by:garethtnash
ID: 38376530
Thank you
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question