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

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
});

这很好用，它允许我 tick/untick 盒子。但是，当我重新加载页面时，它们消失了，所以我决定使用 JS 存储一个 cookie，并将复选框值存储为 "302": "yes", "304": "no", "313": "yes"。数字是单元号，yes/no 是复选框是否被勾选（此 cookie 是手动的，用于测试目的）。然后我的代码继续为每个 UnitBlock 提取 cookie，并根据 cookie 的 yes/no 值设置复选框（请参阅下面的代码）

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>

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

JSON parse of string from cookie and ticking boxes doesn't tick boxes

html

javascript

cookies

jquery

tampermonkey