javascript - ページのリロードjQueryでチェックボックスがオンになっていることを確認する

Question

だから私はjQueryのこのスニペットでいくつかの奇妙な機能を持っています:

$(document).ready(function()
{
    $('.pinToggles').attr('checked','checked');
})

これはhtmlです：

<input type="checkbox" id="redCheck" name="pinSet" value="Red" class="pinToggles" onclick="pinSetCheck(redSet)">Red
<input type="checkbox" id="yellowCheck" name="pinSet" value="Yellow"  class="pinToggles" onclick="pinSetCheck(yellowSet)">Yellow<br>
<input type="checkbox" id="greenCheck" name="pinSet" value="Green"  class="pinToggles" onclick="pinSetCheck(greenSet)">Green
<input type="checkbox" id="blueCheck" name="pinSet" value="Blue"  class="pinToggles"onclick="pinSetCheck(blueSet)">Blue<br>

いくつかのボックスのチェックを外してからリロードすると、最初のチェックされていないボックスのみがチェックされ、その後、次のチェックされていないボックスがチェックされるたびに更新されます。私が欲しい機能は、すべてのチェックボックスをチェックすることです。

これを使用して、JavaScriptでこれを達成できました：

document.getElementById('redCheck').checked = true;
document.getElementById('yellowCheck').checked = true;
document.getElementById('greenCheck').checked = true;
document.getElementById('blueCheck').checked = true;

しかし、これを行うには jQuery がより良い方法だと思いますが、なぜ今のように反応しているのかはわかりません。