每次我单击复选框时，它都会处于选中状态答案

【问题标题】：Every time I click checkbox it takes checked state每次我单击复选框时，它都会处于选中状态
【发布时间】：2015-11-27 04:58:50
【问题描述】：

让我具体说一下，当我单击复选框时，它处于选中状态（我有 2 个复选框）第一个是正确的，第二个是不正确的，如果我单击第一个，然后单击第二个，但在我再次单击第一个之后然后我单击“下一步”它保存了 2 个正确状态，但这是一个大问题，因为最后我需要计算有多少答案是正确的，这会改变正确答案的百分比。我该怎么做才能只保存一次复选框？

state = 0;
var pMin = 1;
var pMax = <? php echo $count ?> ;
var respuestas = [];
var correcto = 0;
var incorrecto = 0;
porcentaje = 0;

function play(pfile) {
  console.log(pfile);

  var source = '<audio id="audio_player"><source id="audio_player_ogv" src="audios/' + pfile + '.ogg"  type="audio/ogg"  /><source id="audio_player_ogv" src="audios/' + pfile + '.mp3"  type="audio/mpeg" /></audio>';
  $('#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 < pMax) {
    $("#p" + pMin).removeClass("ver");
    pMin++;
    $("#p" + pMin).addClass("ver");
    state = 0;
  }
  if (pMin == 9) {
    porcentaje = correcto * 100 / (pMax - 1);
    alert("Tienes" + porcentaje + "%correcto");
  }
}

</head>

<body>
  <div id="general">
    <div hidden>
      <audio id="audio" src=""></audio>
      <div id="divAudio_Player">
        <audio id="audio_player">
          <source id="audio_player_ogv" src="" type="audio/ogg" />
          <source id="audio_player_mp3" src="" type="audio/mpeg" />
        </audio>
      </div>
    </div>


    <ul class="plantilla">
      <?php $count=1 ; while ($count <=9 ) { ?>

      <li id="p<?=$count ?>" <?php if ($count==1){echo "class='ver'";} ?>>
        <img src="img/foto<?=$count ?>.jpg">
        <ul class="sonido">
          <li class="record"><i class="fa fa-microphone"></i> Record (Grabar)</li>
          <li class="stop"><i class="fa fa-stop"></i> Stop (Detener)</li>
          <li class="play"><i class="fa fa-volume-up"></i> Listen (Escuchar)</li>
        </ul>


        <div class="pregunta">I want some roast____.</div>
        <input type="button" onclick="checkAnswers()" value="Check answers" class="boton">

        <div class="respuesta">
          <input type="button" onclick="play('audio<?=$count ?>')" value="I want some roast beef" class="playsound">
          <div class="opciones">
            <p style="margin-left:50px;" class="hh"><b>Evaluate Yourself</b>
            </p>
            <img class="img1" src="img/correcto.png" onClick="Califica(1)">
            <input class="opc1" type="checkbox" value="1" onClick="Califica(1)" />
            <label class="label1" for="label1">Good</label>
            <img class="img2" src="img/incorrecto.png" onClick="Califica(2)">
            <input class="opc2" type="checkbox" value="2" onClick="Califica(2)" />
            <label class="label2" for="label2" style="height:200px; width:50px;">Not Enough</label>
          </div>
        </div>
      </li>
<?php
        $count++;

    }
    $count--;
    ?>


      <div class='continuar'>
        <input type="button" onclick="siguiente()" value="Continuar" class="button">
      </div>

    </ul>

  </div>
</body>

</html>
<script>
</script>

【问题讨论】：

看起来你可能混合了属性和属性，尽量保持不变。
checked 属性的值应为"checked"，否则应因未检查而被删除。 checked 属性是一个布尔值。
只有在选中该复选框时才会改变它显示或隐藏按钮，但这不会改变我想要的，无论如何谢谢
没有？你没有完全理解我说的话。属性值是always字符串，设置true或false没有区别，它们都被评估为字符串，非空字符串总是被评估为true。最简单的解决方案是在您的情况下设置.prop 而不是.attr。
这只是不允许我取消选中它，但如果我继续点击复选框，它会计算我所做的所有点击，这也是一样的，但是我明白你的意思，现在我知道了.prop 和 .attr thx 的区别

标签： javascript jquery html checkbox

【解决方案1】：

我认为您应该删除 onClick 函数并添加基于类的事件侦听器。然后你可以给一个被点击的item添加另一个类来记录它被点击的时候。

这是一个让您入门的基本示例。您还需要添加更多内容，但它为您提供了逻辑的基本概念。

$(document).ready(function() {
    $(".opc1").on('change', function() {
        if(!$(this).hasClass('item-checked')){
            correcto++;
            $(this).addClass('item-checked');
        }
    });

   $(".opc2").on('change', function() {
        if(!$(this).hasClass('item-checked')){
            incorrecto++;
            $(this).addClass('item-checked');
        }
    });
})

【讨论】：