jQuery：选中不使用初始（HTML属性）无线电输入

Question

请检查以下控制台输出，请注意第一个输入已选中属性并已选中：

你可以看到我有2个电台input，1个是checked，但是选择器和prop以及is都不适用。如果我手动点击其中一个收音机，代码可以正常工作。这是我的HTML：

<div class="col-sm-6">
    Type:
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default active">
            <input type="radio" name="generator-type" id="opt-type-passphrase" value="0" autocomplete="off" checked>
            Passphrase
        </label>
        <label class="btn btn-default">
            <input type="radio" name="generator-type" id="opt-type-password" value="1" autocomplete="off">
            Password
        </label>
    </div>
</div>

当我没有点击任何收音机时，为什么页面加载时代码不起作用？有办法解决吗？

编辑：发现问题，我在页面加载中有这段代码：

        $("input[name='generator-type'][value=" + this.Options.Type + "]").prop("checked", "");

正确的解决方案是使用：

.prop("checked", true)

但有人可以解释它是如何工作的吗？为什么有checked属性，但prop函数仍为假？

Answer 1

尝试使用.is(':checked')代替.is('checked')。请查看此Fiddle。

Answer 2

您在已检查的代码中错过了冒号：

temp.is(":checked")

而不是

temp.is("checked")

Answer 3

你需要像这样检查

$( ... ).is(':checked')

为什么呢？因为jquery is方法接受一个css选择器，它用它来过滤当前匹配的元素。

因此temp.is('checked')仅在temp元素具有checked标记时才会为真。在您的情况下，他们有input标记，因此不匹配。

在css伪选择器上使用:checked匹配来检查当前元素是否被选中。这就是你想要的。

了解这一点，你也可以使用$( ... ).is('[checked]')，如果匹配的元素具有checked属性，它将返回true。这可能是你原本想要做的事情。但是，传统的方法是使用:checked。