0

Right so as the title says im trying to show the selected option from my radio type to be highlighted. I know this can be done with css as it is done here however i can not implement it within this script. Any help would be very appreciated, thank you.

$HTML .= '<div class="required">' . "\n";
        $HTML .= '  <label for="contest-q' . $scoreboard['questions'][$i]['number'] . '">' .
            str_format( $scoreboard['questions'][$i]['name'] ) . '</label>' . "\n";
        $HTML .= 'option A<input type="radio" class="underline-on-hover" name="contest[' . $scoreboard['questions'][$i]['number'] . ']" value="A""' .
            ( isset( $entry[$i] ) ? str_format( $entry[$i] ) : '' ) .
            '" id="contest-q' . $scoreboard['questions'][$i]['number'] . '" />' . "\n";


            str_format( $scoreboard['questions'][$i]['name'] ) . '</label>' . "\n";
        $HTML .= '  option B<input type="radio" name="contest[' . $scoreboard['questions'][$i]['number'] . ']" value="B""' .
            ( isset( $entry[$i] ) ? str_format( $entry[$i] ) : '' ) .
            '" id="contest-q' . $scoreboard['questions'][$i]['number'] . '" />' . "\n";

            str_format( $scoreboard['questions'][$i]['name'] ) . '</label>' . "\n";
        $HTML .= '  None<input type="radio" name="contest[' . $scoreboard['questions'][$i]['number'] . ']" value="none""' . 
            ( isset( $entry[$i] ) ? str_format( $entry[$i] ) : '' ) .
            '" id="contest-q' . $scoreboard['questions'][$i]['number'] . '" />' .  "\n";

        $HTML .= '</div>' . "\n";
2
Contributors
1
Reply
25
Views
2 Years
Discussion Span
Last Post by gentlemedia
0

So if I'm right then in the HTML output/source order the label element is before the input tag?
Like that you can't select the label with CSS. Either place the label after the input or use JS/jQuery to select the label.

jQuery:

$(function() {
    $('input:radio[name="sex"]').change(function() {
        if (this.checked) {
          $(this).prev('label').addClass('active').siblings('label').removeClass('active')
        }
    });
});

CSS:

label.active { background-color: #FFFF00 }

https://jsfiddle.net/gentlemedia/g1b57rew/

Edited by gentlemedia

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.