HTML input标签的checked属性与Razor解析

Posted 2020-06-24

在html中，input标签可以通过type属性设置为checkbox。同时，也就包含了一个checked属性。对于这个checked属性，有一个特别的地方就是，它可以不需要属性值就可以表示是否选择了。这背后的原因是源自于早期的HTML，checked是一个独立的boolean属性。

所以给1）checked赋值true

<input type="checkbox" checked="true" />

和2）直接写checked

<input type="checkbox" checked />

是等价的。

我在按照精通ASP.NET MVC4 和精通ASP.NET MVC5第5.4.2节中按照书中例子写了代码如下：

Discount:<input type="checkbox" checked ="@ViewBag.ApplyDiscount"/>
Express:<input type="checkbox" checked ="@ViewBag.ExpressShip"/>
Supplier:<input type="checkbox" checked ="@ViewBag.Supplier"/>

      这里在checked 和 等号之间有一个空格，这就导致了razor在解析的时候直接把checked按照上面说的第二种方式解析了，这就导致了三个选项都被勾选，而且后面的ViewBag对象的属性被直接解释为了各自本来的意思。而不是按照书上所说，根据值得不同要么直接不解析checked属性，要么checked属性被赋值为checked即checked="checked"。上面的代码去掉空格就可以正确显示了。这也提醒我，在写checked属性时不要手贱打空格。

      书里面在这一节最后一段第二句说的不明不白的，这里并不是翻译的问题，我找到了原书，原书写的也是不明不白。书中是这样说的：

“如果Razor插入False、null或者空字符串作为checked标签属性的值，那么，浏览器显示的复选框时已勾选的。但是，Razor在值为False或者null时，会完全栓除该属性标签”。这句话的意思是说，如果在Razor中checked被赋值为False、null或者空字符串时，浏览器会直接渲染成已勾选状态。而如果使用的是类似于上面ViewBag这种需要Razor求值的状况，就会自动把False、null和空字符串删掉这样就不会有勾选状态了。

 附上在爆栈网上的提问。关于checked的详细看回答者。