oTree 和 JavaScript 检查类是否处于活动状态（选中）

Question

当我运行这段代码时：

    <div id = "1-round" class="btn-group btn-group-toggle btn-lg " data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        <script>
           $('label').click( function() {
          $(this).addClass('btn-primary').removeClass('btn-default').siblings().removeClass('btn-primary').addClass('btn-default');
         if ($('#id_players_choice_0').is(':checked')) {
         x = id_players_choice_0.value};
         if ($('#id_players_choice_1').is(':checked')) {
         x = id_players_choice_1.value};
          alert(x);
         });
        </script>
        {{checkbox}}
    </label>
{% endfor %}
</div>

我仅在第二次或第三次按下按钮时才获得值（x 变量）。
有没有办法解决这个问题？
谢谢！

Answer 1

$('label') 选择器将选择已经是文档一部分的标签。此外，将单击处理程序放在循环中也不好，因为它将在多个元素上乘以相同的处理程序。将该脚本移动到文档末尾，就在结束 </body> 标记之前。

另外，请确保声明您的变量x，使其具有正确的范围。

<div id = "1-round" class="btn-group btn-group-toggle btn-lg " data-toggle="buttons" >
{% for checkbox in form.players_choice %}
    <label class="btn btn-primary rounded mr-3 active btn-lg 1-round" style="margin-bottom:8px;">
        {{checkbox}}
    </label>
{% endfor %}
</div>
<script>
    $('label').click( function() {
        var x;
        $(this).addClass('btn-primary').removeClass('btn-default')
               .siblings().removeClass('btn-primary').addClass('btn-default');
        if ($('#id_players_choice_0').is(':checked')) {
            x = id_players_choice_0.value;
        }
        if ($('#id_players_choice_1').is(':checked')) {
            x = id_players_choice_1.value;
        }
        alert(x);
    });
</script>

如果您不能保证在脚本执行之前所有标签都已创建，则使用事件委托：

    $(document).on('click', 'label', function() { // ...etc