javascript - 在复选框中选中的 Jquery DOM 设置适用于 true 而不是 false

Question

我正在尝试将复选框的选中值设置为来自 Mongo 的传入数据。如果值为 true，它工作正常，但当值为 false 时，它​​仍然会选中该框。谁能告诉我出了什么问题。

<input type="checkbox" id="chk" name="interested" value="{{inmate.interested}}" onclick="chkSet(this)">Not Interested <br/>
<input type="checkbox" id="chk" name="correspondence" value="{{inmate.correspondence}}" onclick="chkSet(this)">Req Correspondence<br/>
<input type="checkbox" id="chk" name="study" value="{{inmate.study}}" onclick="chkSet(this)">Request Study<br/>
<input type="checkbox" id="chk" name="specialtyItemsApproved" value="{{inmate.specialtyItemsApproved}}" onclick="chkSet(this)">Specialty Items
Approved<br/>
<br>

$(document).ready(function(){

    document.getElementsByName("interested")[0].checked=document.getElementsByName("interested")[0].value;
    document.getElementsByName("correspondence")[0].checked=document.getElementsByName("correspondence")[0].value;
    document.getElementsByName("study")[0].checked=document.getElementsByName("study")[0].value;
    document.getElementsByName("specialtyItemsApproved")[0].checked=document.getElementsByName("specialtyItemsApproved")[0].value;

});

Answer 1

document.getElementsByName("interested")[0].checked=document.getElementsByName("interested")[0].value; 设置基于 checked 属性元素的值，它始终是一个字符串。所以它会将字符串强制转换为 bool 值。所有非空字符串都是true，因此"true" 和"false" 都会将checked 设置为true。

如果您使用==测试，则可以相应地设置checked:

document.getElementsByName("interested")[0].checked =
    document.getElementsByName("interested")[0].value == "true";

<小时/>

也就是说，HTML/DOM 中复选框值的目的不是来指示它是否被选中，因此将 value 设置为 “true” 或 "false" 首先可能不是您真正想要做的。 value 的目的是说明如果复选框被选中，应使用表单发送什么值。示例:

<input type="checkbox" name="roomoptions" value="non-smoking">
<input type="checkbox" name="roomoptions" value="with-kitchen">
<input type="checkbox" name="roomoptions" value="en-suite">

如果选中该复选框，表单将显示 roomoptions=non-smoking，和/或 roomoptions=with-kitchen 如果那个复选框被选中，和/或roomoptions=en-suite(如果那个复选框被选中)。如果没有选中任何一项，则表单根本不会发送任何 roomoptions。如果选中所有三个复选框，则将发送所有三个复选框。

另外，您不能在 HTML/DOM 文档中的多个元素上使用相同的 id。 id 必须唯一。因此，您不能在所有复选框上使用 id="chk"。

所以我怀疑你真的想要更多类似这样的东西:

<input type="checkbox" id="chk-interested" name="interested" {{#if inmate.interested}}checked{{/if}} onclick="chkSet(this)">Not Interested <br/>
<input type="checkbox" id="chk-correspondence" name="correspondence" {{#if inmate.correspondence}}checked{{/if}}" onclick="chkSet(this)">Req Correspondence<br/>
<input type="checkbox" id="chk-study" name="study" {{#if inmate.study}}checked{{/if}} onclick="chkSet(this)">Request Study<br/>
<input type="checkbox" id="chk-specialty-items-approved" name="specialtyItemsApproved" {{#if inmate.specialtyItemsApproved}}checked{{/if}} onclick="chkSet(this)">Specialty Items

那么你根本不需要 JavaScript。

我没有为这些值赋值，这意味着当发送表单时(如果您以表单发送)，interested 的值，这样服务器就会receive 将是默认值“on”。例如，表单要么根本没有 interested 字段(未选中复选框)，要么有 interested=on。

请注意，除非您将这些 id 用于某些用途，否则您可以将其保留；这是表单提交时将使用的名称。但我让它们变得独一无二，以证明你必须这样做。