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? – Samuel Asor Sep 26 '17 at 10:41
  • in another <div class="score"> </div> – thibaultlgd Sep 26 '17 at 10:46

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, privacy policy and cookie policy

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