javascript - jQuery if radio button is selected then proceed to next element -

i'm new javascript , jquery. know code not prettiest, i'm trying start somewhere.

i have series of questions shown 1 @ time, , want create sort of validation prevent user going next question if radio button on first button hasn't been selected.

html (i have 4 of these .questioncontainers

<div class="questioncontainer">  <div class="question">      how storage need? </div>   <div class="answers">      <ul>          <li>              <label>                  <input type="radio" id="storage">1gb or less              </label>          </li>           <li>              <label>                  <input type="radio" id="storage">more 1gb              </label>          </li>        </ul>  </div>   <div class="btncontainer">      <div class="next">          <a class="btnnext">next</a>      </div>  </div> </div> 

javascript

(function(){      var questions = {          container : $('.questioncontainer'),          init : function() {              this.start();              if($('input[type=radio]:checked').length > 0){                 this.container.find('a.btnnext').on('click', this.next);             }          },          start : function() {              this.container.not(':first').addclass('hide');         },          next : function() {              var container = $('.questioncontainer');              $(this).closest(container).hide(function(){                 $(this).closest(container).next().show();                    });         }     };     questions.init(); })(); 

the specific line isn't working:

if($('input[type=radio]:checked').length > 0) {     this.container.find('a.btnnext').on('click', this.next); } 

the problem

when add if statement , click radio button followed next, not go next question. not receiving errors in console.

this binds click event if checked @ time start function called (not want - never true unless pre-select radio button user without action):

        if($('input[type=radio]:checked').length > 0){             this.container.find('a.btnnext').on('click', this.next);         } 

try replacing instead:

this.container.find('a.btnnext').on('click', function () {         if($('input[type=radio]:checked').length > 0){             this.next();         } }); 

this way bind click event, function bound allows next called if checked @ time function called (i.e. when next button clicked).