HTML中的checked问题

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>
...

探索

1. 直接将第一个设置checked="true"，第二个设置checked="false"

结果：女被选中了。直接true或false都不管用啊！！！

1. 查看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！

1. 好吧，我来用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}会因为在域中找不到这个属性而返回”“(空字符串)

总结

1. 在HTML中，单选框和复选框的选中和不选的状态为

<!--选中状态-->
<input type="radio|checkbox" checked />
<!--不选中状态-->
<input type="radio|checkbox" />

如果你写了<input type="radio|checkbox" checked="xxx">那么这个就会被选中！

1. 在JS中，单选和复选框的选中和不选中可以通过设置Elt.checked=true|false;确定

2. ${"字符串"}会原样输出字符串，${属性名}当属性不存在时会返回空字符串