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 是这样做的更好方法，但不确定为什么它会以现在的方式做出反应。

Answer 1

利用

$('input:checkbox[name="pinSet"]').prop('checked',true);

属性等于选择器

或者

$('.pinToggles').prop('checked',true);

或者

$('#redCheck,#yellowCheck,#greenCheck,#blueCheck').prop('checked',true);

。支柱（）

$( elem ).prop( "checked" ) true (Boolean) 将随着复选框状态而改变

$( elem ).attr( "checked" ) (1.6) "checked" (String) 复选框的初始状态；不变