jQuery – Revisit – Fun with Radio Button lists, checkboxes and labels

In my previous post I outlined how easy it was to grab text from a label tag associated to a form input element.

• jQuery – Fun with Radio Button lists, checkboxes and labels

I have quickly thrown together a demo page that shows a “tra la” aspect.

All I have done here is added in a couple of styles, a new radio list for the colour selection and an express delivery option.  The green div shown above the colour radio button list has it’s background colour controlled by whatever colour the user selects.

Change Background colour

Add an onclick event that captures the value in this case colour and passes it into a simple function:

 1:  $("input[name*='grpColour']").click(function() {

 2:             SetTShirtDivColour($(this).val());

 3:         });

The function is is very straight forward:

 1: function SetTShirtDivColour(colour) {

 2:         $('#tshirtColour').css("background-color", colour).text(colour).css("color", "white").css("font-weight", "bold");

 3:         var border = "2px solid " + colour;

 4:         $('#ColourHolder').css("border",border);

 5:      }

The above adds styles to the tshirtColour and ColourHolder div using jquerys ability to chain methods.  As you can see on line 2 the colour passed into this function is used when setting the background colour.

Adding a popup div

To add a quick popup I have attached an onclick event to the Yes radio item Express delivery.

 1:   $('#RadioDelYes').click(function() {

 2:             ShowHideDisclaimer();

 3:         });

Along with some css we can do the below. The ShowHideDisclaimer method just toggles the visibility of the background black div “transp” and the disclaimer div “ExpressDelivery”. I could of added a “you clicked Yes/No” to the disclaimer div but I wanted to show that you can attach the onclick event to a single item within a list.

  function ShowHideDisclaimer() {
        $('#transp').toggle();
        $('#ExpressDelivery').toggle();

    }

View live demo and see full source code.