title: Every time I click checkbox it takes checked state
body: <p>Let me be specific when I click checkbox it takes checked state (I have 2 check box) the first one is correct and second one is incorrect, if I click first one and after click second one but after I click first one again and I click "next" It saved 2 correct state but this is a big problem because at the end I need count how many answers are correct and this changes the % of correct answers. What Can I do to save only one time the checkbox?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>state = 0;
  var pMin = 1;
  var pMax = &lt;? php echo $count ?&gt; ;
  var respuestas = [];
  var correcto = 0;
  var incorrecto = 0;
  porcentaje = 0;
  
  function play(pfile) {
    console.log(pfile);
  
    var source = '&lt;audio id="audio_player"&gt;&lt;source id="audio_player_ogv" src="audios/' + pfile + '.ogg"  type="audio/ogg"  /&gt;&lt;source id="audio_player_ogv" src="audios/' + pfile + '.mp3"  type="audio/mpeg" /&gt;&lt;/audio&gt;';
    $('#divAudio_Player').html(source);
    var aud = $('#audio_player').get(0);
    aud.play();
  }
  
  function ActivecheckAnswers(e) {
    $("#p" + pMin + " .boton").addClass("ver2");
  }
  
  function checkAnswers(e) {
    $("#p" + pMin + " .respuesta").addClass("ver");
  }
  $(".sonido li").click(function() {
    console.log(this.className);
  });
  
  function Califica(opc) {
    $(".continuar").addClass("ver");
    respuestas[pMin] = opc;
    if (opc == 1) {
      correcto++;
      $("#p" + pMin + " .respuesta .opciones .opc1").attr('checked', true);
      $("#p" + pMin + " .respuesta .opciones .opc2").attr('checked', false);
      $('.opc1').on("click", function() {
        if ($(this).prop('checked')) {
          $('.button').show();
        } else {
          $('.button').hide();
        }
      });
  
    } else if (opc == 2) {
      incorrecto++;
      $("#p" + pMin + " .respuesta .opciones .opc1").attr('checked', false);
      $("#p" + pMin + " .respuesta .opciones .opc2").attr('checked', true);
      $('.opc2').on("click", function() {
        if ($(this).prop('checked')) {
          $('.button').show();
        } else {
          $('.button').hide();
        }
      });
    }
  };
  
  function siguiente() {
    var aud = $('#audio_player').get(0);
    aud.pause();
  
    $(".plantilla .continuar").removeClass("ver");
    if (pMin &lt; pMax) {
      $("#p" + pMin).removeClass("ver");
      pMin++;
      $("#p" + pMin).addClass("ver");
      state = 0;
    }
    if (pMin == 9) {
      porcentaje = correcto * 100 / (pMax - 1);
      alert("Tienes" + porcentaje + "%correcto");
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="general"&gt;
      &lt;div hidden&gt;
        &lt;audio id="audio" src=""&gt;&lt;/audio&gt;
        &lt;div id="divAudio_Player"&gt;
          &lt;audio id="audio_player"&gt;
            &lt;source id="audio_player_ogv" src="" type="audio/ogg" /&gt;
            &lt;source id="audio_player_mp3" src="" type="audio/mpeg" /&gt;
          &lt;/audio&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;ul class="plantilla"&gt;
        &lt;?php $count=1 ; while ($count &lt;=9 ) { ?&gt;
  
        &lt;li id="p&lt;?=$count ?&gt;" &lt;?php if ($count==1){echo "class='ver'";} ?&gt;&gt;
          &lt;img src="img/foto&lt;?=$count ?&gt;.jpg"&gt;
          &lt;ul class="sonido"&gt;
            &lt;li class="record"&gt;&lt;i class="fa fa-microphone"&gt;&lt;/i&gt; Record (Grabar)&lt;/li&gt;
            &lt;li class="stop"&gt;&lt;i class="fa fa-stop"&gt;&lt;/i&gt; Stop (Detener)&lt;/li&gt;
            &lt;li class="play"&gt;&lt;i class="fa fa-volume-up"&gt;&lt;/i&gt; Listen (Escuchar)&lt;/li&gt;
          &lt;/ul&gt;
  
  
          &lt;div class="pregunta"&gt;I want some roast____.&lt;/div&gt;
          &lt;input type="button" onclick="checkAnswers()" value="Check answers" class="boton"&gt;
  
          &lt;div class="respuesta"&gt;
            &lt;input type="button" onclick="play('audio&lt;?=$count ?&gt;')" value="I want some roast beef" class="playsound"&gt;
            &lt;div class="opciones"&gt;
              &lt;p style="margin-left:50px;" class="hh"&gt;&lt;b&gt;Evaluate Yourself&lt;/b&gt;
              &lt;/p&gt;
              &lt;img class="img1" src="img/correcto.png" onClick="Califica(1)"&gt;
              &lt;input class="opc1" type="checkbox" value="1" onClick="Califica(1)" /&gt;
              &lt;label class="label1" for="label1"&gt;Good&lt;/label&gt;
              &lt;img class="img2" src="img/incorrecto.png" onClick="Califica(2)"&gt;
              &lt;input class="opc2" type="checkbox" value="2" onClick="Califica(2)" /&gt;
              &lt;label class="label2" for="label2" style="height:200px; width:50px;"&gt;Not Enough&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
  &lt;?php
          $count++;
  
      }
      $count--;
      ?&gt;
  
  
        &lt;div class='continuar'&gt;
          &lt;input type="button" onclick="siguiente()" value="Continuar" class="button"&gt;
        &lt;/div&gt;
  
      &lt;/ul&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  &lt;script&gt;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>