美文网首页前端技术
checkbox 的四种状态

checkbox 的四种状态

作者: 一俢 | 来源:发表于2019-01-19 10:31 被阅读74次

    checkbox 的四种状态

    checkbox 是 HTML 中非常常用的控件,它可以作为多选控件,很多开发人员知道它有三种状态:checkeduncheckeddisabled,其实它还有第四种鲜为人知的状态indeterminate

    indeterminate

    indeterminate属性用来表示 checkbox 元素的状态为不确定,不同的平台和浏览器对于这种状态的显示不一样,在 Chrome 下为一个横杠,在 Firefox 下为实心正方形:

    checkbox-state.png

    设置 indeterminate 状态

    checkeduncheckeddisabled可以通过 HTML 属性直接设置,但是indeterminate只能通过 JavaScript 来设置:

    document.getElementById("ckb").indeterminate = true;
    

    indeterminate CSS 伪类

    类似于:checked:unchecked伪类,我们也可以使用:indeterminate伪类进行对不确定状态的 checkbox 的选取:

    checkbox:indeterminate {
        
    }
    

    相关文章

      网友评论

        本文标题:checkbox 的四种状态

        本文链接:https://www.haomeiwen.com/subject/rbjcdqtx.html