Hi again,

 

I'm trying to style radio buttons and display a bg colour on the span when the radio button is selected but it doesn't seem to be working. Here's the HTML & CSS.

<div class="options">
   <label for="windowFront">
      <input id="windowFront" class="js-radio-button" name="window" value="Front" type="radio">
      <span>Front Windscreen</span>
   </label>
</div>

.options label input[type="radio"]:checked + span	{
    background: #ed1c24;
    color: #fff;
}

Any ideas why it's not working?

 

Thanks,
Al.

I'm guessing this is part of the previous code? What you're trying to do with the span is essentially emulate a label. With this in mind, I've refactored your code to use the label in place of the span https://jsfiddle.net/42876wdq/.

 

If you still want to do what you have above, you don't need the for attribute on the label if you wrap it around your input, it's implied that the text inside there is the content of your label https://jsfiddle.net/42876wdq/1/.

Thanks for the reply Jack. It sure is in relation to the previous post.

 

What I'm trying to do is use a bg image in place of the radio button but keep the radio button functionality, I seen while searching earlier that some people mentioned that if the radio button (input) is set to display none it won't work.

 

Here is what I am trying to accomplish.

 

Which brings me to the next point, there are different sections in the form and when a user selects one section I'd like another section to appear.

 

Here is the code I have so far some the sections, I'm a novice at all this so excuse the coding and I know there must be a better way to code this up.

$('input[name=window]').change(function () {
    if ($(this).val() == 'Front') {
        $('#damageChips').show();
    } else {
        $('#damageChips').hide();
    }
});
$('input[name=damage]').change(function () {
    if ($(this).val() == 'oneToThree') {
        $('#chipSize').show();
    } else {
        $('#chipSize').hide();
    }
});
$('input[name=chipsize]').change(function () {
    if ($(this).val() == 'fingernail') {
        $('#edgeChip').show();
    } else {
        $('#edgeChip').hide();
    }
});
$('input[name=edgechip]').change(function () {
    if ($(this).val() == 'Yes') {
        $('#result').show();
    } else {
        $('#result').hide();
    }
});
$('input[name=continue]').change(function () {
    if ($(this).val() == 'Yes') {
        $('#details').show();
    } else {
        $('#details').hide();
    }
});

What the code above does is display the next form section, but what I noticed is if I select in the correct order the options above, they work fine but if I go back to the start of the form and change the first option the other options below are still displayed so I'm thinking I'll need some code to group them together somehow, rather than have them work individualy - hope that makes sense.

 

Al.

Can you put what you have so far inside codepen.com or jsfiddle.com? It makes it easier to find a solution.

Hey Jack,

 

Here is a very basic fiddle of it - https://jsfiddle.net/allanlud/usjoL467/3/.

 

It does work fine here, but that is only a small portion of the overall form, there are many more options down the form similar to what you see there. So I was hoping to find out if there was a cleaner way to write the jQuery code or is it ok as is?

You can use data-* attributes to achieve this in a much more compact way. This is an example:

<!-- data-ref corresponds to the target form to be displayed -->
<input id="windowFront" class="js-radio-button" name="window" value="Front" type="radio" data-form="#damageChips">

<!-- target form to be displayed when the radio is changed -->
<div id="damageChips" class="form-section js-form-section">
... 
</div> 

// jQuery
var $radioButtons = $('.js-radio-button');
var $forms = $('.js-form-section');

$radioButtons.change(function() {
	var $this = $(this);
  var targetForm = $this.data('form');
 
  $forms.hide();    
  $(targetForm).show();
});
 

Fiddle demo: https://jsfiddle.net/usjoL467/4/

Why not add a classname to your radio buttons then your selectors won't be qualified so deeply and you will have reduced selector specificty.

.radio:checked + .radio-ui {}
is much nicer than 
.options label input[type="radio"]:checked + span

Qualifying selectors is really bad for maintainability. what happens if that span changes to a div or the label becomes a div and the span becomes a label? With a class you are not tied to the html element semantics so your concerns are no longer mixed.

I wouldn't use jQuery's hide/show helpers as they add in a bunch of CSS and do so quite inefficiently as Paul Irish alludes to here: https://twitter.com/paul_irish/status/564443848613847040?lang=en You are better to add / remove stateful classes such as .is-hidden / .is-active and so on.

Edited May 19, 20179 yr by rbrtsmith