checkbox的三种状态处理

checkbox只有两种值:选中(checked)或未选中(unchecked)。它可以有任何值,但是表单提交时checkbox的值只能是checked或unchecked。它的默认值是unchecked,你可以在HTML中这样控制它:

<!-- Default to unchecked -->
<input type="checkbox">

<!-- Default to checked, XHTML -->
<input type="checkbox" checked="checked" />

<!-- Default to checked, HTML5 -->
<input type="checkbox" checked>

视觉上,checkbox有三种状态:checked、unchecked、indeterminate(不确定的)。看起来就像这样子:

对于indeterminate状态的checkbox需要注意的是:你无法在HTML中设置checkbox的状态为indeterminate。因为HTML中没有indeterminate这个属性,你可以通过Javascript脚本来设置它

var checkbox = document.getElementById("reyo-checkbox");
checkbox.indeterminate = true;

 或者通过jQuery来设置

$("#reyo-checkbox").prop("indeterminate", true); // prop is jQuery 1.6+

$("#reyo-checkbox").attr("indeterminate", true);
$("#reyo-checkbox").prop("indeterminate", true);
两种都可以,不过新版jquery推荐第二种,两个在其他方面都差不多,我发现的唯一不同就是在checkbox上的时候,需要用prop,不然IE浏览器会不兼容

 checkbox的indeterminate状态仅仅是视觉上的,它的值仍然只有checked或unchecked,这意味着indeterminate状态的checkbox的真正价值只是在用户界面上看起来更友好!来看一下我们实际应用的效果:

 

posted @ 2016-07-19 11:32  锐洋智能  阅读(31344)  评论(0编辑  收藏  举报