javascript - Jquery if returns always false -

so have 2 problems here

1. the if checks $isitchecked = $('#group' + groupnumber).hasclass("checked"); returns false though class has class "checked"
2. even though groupnumber icrements still works first group.

            var progressprocent = 0;              var groupnumber = 1;            $('#group' + groupnumber + ' input[type="radio"]').click(function(){             $whatgroup = "#group" + groupnumber;             $isitchecked = $('#group' + groupnumber).hasclass("checked");              if ($isitchecked) {              }else{              progressprocent = progressprocent + 2.27272727;            }                $("#progress-container").removeclass("hide");              $( $whatgroup).addclass("checked");                $("#progress-bar").css('width', progressprocent + '%');              groupnumber = groupnumber + 1;            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <div class="question form-group">            <h3>question 1</h3>            <fieldset class="test-field pull-left" id="group1">              <input type="radio" name="q1" id="q1option1" class="left" value="-3">                <input type="radio" name="q1" id="q1option2" class="left" value="-2">                <input type="radio" name="q1" id="q1option3" class="left" value="-1">                <input type="radio" name="q1" id="q1neotral1" value="0">                <input type="radio" name="q1" id="q1option1r" class="right" value="1">                <input type="radio" name="q1" id="q1option2r" class="right" value="2">                <input type="radio" name="q1" id="q1option3r" class="right" value="3">            </fieldset>          </div>          <br>          <div class="question form-group">            <h3>question 2</h3>            <fieldset class="test-field pull-left" id="group2">              <input type="radio" name="q2" id="q2option1" class="left" value="-3">                <input type="radio" name="q2" id="q2option2" class="left" value="-2">                <input type="radio" name="q2" id="q2option3" class="left" value="-1">                <input type="radio" name="q2" id="q2neotral1" value="0">                <input type="radio" name="q2" id="q2option1r" class="right" value="1">                <input type="radio" name="q2" id="q2option2r" class="right" value="2">                <input type="radio" name="q2" id="q2option3r" class="right" value="3">            </fieldset>          </div>           <br />           <br />          <div class="progress-container" id="progress-container">            <div class="progress">              <div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >              </div>            </div>          </div>

easiest way do:-

progressprocent = 0;  $("input[type='radio']").on('click',function(){     if($(this).parent().find('.checked').length ==0){        progressprocent = progressprocent + 2.27272727;        $("#progress-bar").css('width', progressprocent + '%');     }      $(this).addclass('checked');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  <div class="question form-group">    <h3>question 1</h3>    <fieldset class="test-field pull-left" id="group1">      <input type="radio" name="q1" id="q1option1" class="left" value="-3">        <input type="radio" name="q1" id="q1option2" class="left" value="-2">        <input type="radio" name="q1" id="q1option3" class="left" value="-1">        <input type="radio" name="q1" id="q1neotral1" value="0">        <input type="radio" name="q1" id="q1option1r" class="right" value="1">        <input type="radio" name="q1" id="q1option2r" class="right" value="2">        <input type="radio" name="q1" id="q1option3r" class="right" value="3">    </fieldset>  </div>  <br>  <div class="question form-group">    <h3>question 2</h3>    <fieldset class="test-field pull-left" id="group2">      <input type="radio" name="q2" id="q2option1" class="left" value="-3">        <input type="radio" name="q2" id="q2option2" class="left" value="-2">        <input type="radio" name="q2" id="q2option3" class="left" value="-1">        <input type="radio" name="q2" id="q2neotral1" value="0">        <input type="radio" name="q2" id="q2option1r" class="right" value="1">        <input type="radio" name="q2" id="q2option2r" class="right" value="2">        <input type="radio" name="q2" id="q2option3r" class="right" value="3">    </fieldset>  </div>   <br />   <br />  <div class="progress-container" id="progress-container">    <div class="progress">      <div class="progress-bar progress-bar-striped active" id="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" >      </div>    </div>  </div>

explanation:-

on click of radio button:-

1.first check it's parent div have radio button checked class or not?

2.if no addition+progress-bar increase , after add checked class clicked radio button.

3.2nd step insure next time when other radio button of same div clicked.nothing happen.