If radio button is checked or not JQuery

Question

I don't have any form here. Just a few divs with a few questions. I want to check here if radio button is checked or not if it is checked then store its value in an array and move onto the next screen. I found out that the required attribute for client side validation only works for forms and i don't have any forms here.

here is my html below :

<div class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Kerry. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Galway. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Dublin. </input></span>
    <span><input type="radio" name="radio" id="a1" value="a1" /> Donegal. </input></span>
    <div class="button_box">
        <button class="back" disabled="true" style="color:#aaa">Back</button>
        <button class="next">Next</button>
    </div>
</div>

<div class="next-div" style="display:none;">
    <p>Question2: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Taipei. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Rome. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="b1" value="a2" /> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="next">Next</button>
    </div>
</div>

<div class="next-div" style="display:none;">
    <p>Question3: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Taipei. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Rome. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="c1" value="a3" /> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="next">Next</button>
    </div>
</div>
<div class="next-div" style="display:none;">
    <p>Question4: Where in the world would you find the Colosseum?</p>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Taipei. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Rome. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Reykjavic. </input></span>
    <span><input type="radio" name="radio" id="d1" value="a3" /> Brussels. </input></span>
    <div class="button_box">
        <button class="back">Back</button>
        <button class="finish">Finish</button>
    </div>
</div>

and here is my jquery for now

$('.next').click(function(){
   $(this).parent().parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().parent().hide().prev().show();//hide parent and show previous
});

Answer 1

check this will help:-

var checkedValues = [];
 $('.next').click(function() {
    var $form = $(this).parent().parent();
    var $checked =     $(this).parent().parent().find('input[type=radio]:checked')
    var isChecked = $checked.length > 0;
    if(!isChecked){
      alert('Please Choose an option.');
      return;
    }
    checkedValues.push($checked.val());
    console.log($checked.val());
    $form.hide().next().show(); //hide parent and show next
  });

  $('.back').click(function() {
    console.log('back');
    $(this).parent().parent().hide().prev().show(); //hide parent and show previous
  });

here a working demo

Answer 2

Use .prop() method by jQuery. And do not use the same id multiple times:

HTML:

<div id="first" class="first-div">
    <p>Question1: Where in the world would you find the Spire?</p> 
    <span><input type="radio" name="radio" id="a10" value="0" /> Kerry. </input></span>
    <span><input type="radio" name="radio" id="a11" value="1" /> Galway. </input></span>
    <span><input type="radio" name="radio" id="a12" value="2" /> Dublin. </input></span>
    <span><input type="radio" name="radio" id="a13" value="3" /> Donegal. </input></span>
    <div class="button_box">
       <button class="back" disabled="true" style="color:#aaa">Back</button>
       <button class="next">Next</button>
    </div>   
</div>

Javascript:

$("#first input").each(function () {
    if ( $(this).prop("checked") ) {
        console.log( $(this).val() );
    }
});