Question

我正在编写一个客户端脚本来清理我大学使用的系统，并且我遇到了个人完成功能的问题。我所拥有的是一个将<script>元素注入DOM的附加组件，这样我就可以修改UI。但是，我遇到了一个问题。

我在“UnitBlocks”中添加了一些复选框，允许我检查我已经完成但尚未上传的单元。这些触发了一个JQuery事件，允许我勾选框，然后将UnitBlock的颜色更改为黄色（参见下面的代码）：

var pc = false;
$(this).find('#personalCompletion').click(function(){ // personal completion is the checkboxId
    if (pc === false)
    {
        $(this).closest('a').css('background-color', '#FFCC45 !important');
        $(this).closest('a').children('p').text('Done');
        pc = true;
    }
    else
    {
        $(this).closest('a').css('background-color', '');
        $(this).closest('a').children('p').text('In Progress');
        pc = false;
    }
    $(this).closest('p').append('   <input type="checkbox" id="personalCompletion"></input>'); //this re appends the checkbox
});

这很好用，它允许我勾选/取消选中该框。但是，当我重新加载页面时，它们会消失，所以我决定使用JS存储一个cookie，其中的复选框值存储为"302": "yes", "304": "no", "313": "yes"。数字是单位数字，是/否是是否勾选方框（此cookie是手动的，用于测试目的）。然后我的代码继续为每个UnitBlock拉取cookie，并且依赖于cookie的是/否值，它设置了勾选框（请参阅下面的代码）

var cookieValues = getCookie('completedUnits');
for (var i = 0; i <= cookieValues.length; i++)
{
    if (cookieValues[i].includes($(this).attr('data-modcode'))) //data-modcode is a custom attribute with the unit number in (302 etc.)
    {
        if (cookieValues[i].text().indexOf('yes') >= 0) //if it includes the word 'yes'
        {
            $(this).find('#personalCompletion').attr('checked');
        }
    }
}

这不会引发任何错误，也不会勾选任何方框......

Answer 1

您应该使用.prop()方法更改checked属性（就像selected和disabled属性一样）来表示和更改表单元素的状态。

checked属性和checked属性之间存在很大差异：属性表示defaultChecked属性值，它只是输入的初始状态，而checked属性更改复选框的状态。

$(function() {
  var $checkbox = $('#checkbox');

  $('.debug').text($('.debug').text() + '\n' +
                   $checkbox.attr('checked') + '\n' +   
                   $checkbox.prop('checked'));

  $('#button').on('click', function() {
    $checkbox.prop('checked', !$checkbox.prop('checked'));

    $('.debug').text($('.debug').text() + '\n' +
                     $checkbox.prop('checked'));
  });
});

.debug {
  white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" checked/>
<input type="button" id="button" value="click me!" />
<div class="debug"></div>

来自cookie和滴答框的字符串的JSON解析不勾选方框

1 个答案: