HTML中的checked问题
问题描述
在下面这段代码中使用了EL表达式,通过嵌入的js代码知道,第一个弹窗是true,第二个是false。然后浏览器显示的结果是选了女。当时我就纳闷了…
...
<td>
<%--${user.gender eq "male"?"checked":""} --%>
<input type="radio" name="gender" id="gender" value="male" checked="${user.gender=='male'? 'true':'false' }"/>男
<script type="text/javascript">alert(${user.gender=='male');</script>
<input type="radio" name="gender" id="gender" value="female" checked="${user.gender=='female'? 'true':'false' }" />女
<script type="text/javascript">alert(${user.gender=='female');</script>
</td>
...
探索
- 直接将第一个设置
checked="true"
,第二个设置checked="false"
结果:女被选中了。直接true或false都不管用啊!!!
- 查看DHTML帮助文档发现
Syntax
HTML <ELEMENT CHECKED …> Scripting object.checked [ = bChecked ]
Possible Values
bChecked Boolean that specifies or receives one of the following values.false Default. Control is not selected.
true Control is selected.
The property is read/write. The property has a default value of false.
原来,input标签中要么出现一个checked表明是被选中,要么不出现这个checked。在JS代码中才是要设置true或false!
- 好吧,我来用checked
...
<td>
<%--${user.gender eq "male"?"checked":""} --%>
<input type="radio" name="gender" id="gender" value="male" ${user.gender eq "male" ?checked : ""} />男
<script type="text/javascript">alert(${user.gender=='male');</script>
<input type="radio" name="gender" id="gender" value="female" ${user.gender eq "male" ? checked : ""} />女
<script type="text/javascript">alert(${user.gender=='female');</script>
</td>
...
结果:坑爹啊,还是选了女!!!
经过漫漫地探索和谈论——————————————————————
问题,终于解决了!
原来,这个checked应该用单引号包围。为什么?因为${'checked'}
太会原样输出checked,而${checked}
会因为在域中找不到这个属性而返回”“(空字符串)
总结
- 在HTML中,单选框和复选框的选中和不选的状态为
<!--选中状态-->
<input type="radio|checkbox" checked />
<!--不选中状态-->
<input type="radio|checkbox" />
如果你写了
<input type="radio|checkbox" checked="xxx">
那么这个就会被选中!
在JS中,单选和复选框的选中和不选中可以通过设置
Elt.checked=true|false;
确定${"字符串"}
会原样输出字符串,${属性名}
当属性不存在时会返回空字符串