here is my situation,

I have different input, each of them them having a

<input id="q1a2" type="radio" name="q1" value="1" tabindex="-1">
<input id="q2a1" type="radio" name="q2" value="3" tabindex="-1">


those value are being taken from an Advanced custom field like:

<?php if( have_rows('answer_three') ): ?>

    <?php while( have_rows('answer_three') ): the_row(); ?>

    <input id="<?php echo 'q' . $i . 'a3' ?>" type="radio" name="<?php echo 'q' . $i ?>" value="<?php the_sub_field('score_three');  ?>">
    <label value="<?php the_sub_field('score_three');  ?>" for="<?php echo 'q' . $i . 'a3'   ?>">
    <?php the_sub_field('new_answer_three');  ?></label>

    <?php endwhile; ?>
<?php endif; ?>

when an input is selected ( "checked")

The html look like:

body.page-template-page-test section.questions input:checked + label

What I am trying to achieve is to display the value of the input checked only.

How is this possible to achieve

Thanks for your help !

  • Where do you want to display the value? Commented Sep 26, 2017 at 10:41
  • in another <div class="score"> </div> Commented Sep 26, 2017 at 10:46

1 Answer 1


Well, I don't know how many input type of radios and checkboxes you have, but this should get you want you need:

$(document).ready(function() {
    $('input:radio').change(function() {
        // get the value
        var newValue = $(this).val();

        // Update the div.score

PS: Your radio input need to have the same name, if you do not want more than one radio to be selected.

See CodePen

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.