html中的checkbox复选框不确定状态的设置

元气小坏坏 提交于 2019-11-27 02:33:21
这篇文章要分享的是复选框的不确定状态,html中的复选框是:
    <input id="cb" type="checkbox"/>
    一般遇到复选框或许只需要选中或者不选中两种状态即可,但是有时候需要第三种不确定状态,例如做带复选框的级联菜单时,子级菜单的多个复选框为部分选中的时,父级菜单的复选框应处于不确定状态,来反映子菜单的部分选中情况。

方法是通过js设置复选框的indeterminate属性,在标签中设置此属性无效。

<html>

<head>

<script>

function init(){

chkbox = document.getElementById("cb");

}

function fun1 () {

    chkbox.indeterminate = false;

    chkbox.checked = true;

}

function fun2() {

    chkbox.indeterminate = false;

    chkbox.checked = false;

}

function fun3() {

    chkbox.indeterminate = true;

}

</script>

</head>

<body οnlοad="init()">

  <input id="cb" type="checkbox" />

  <button οnclick="fun1()">选中</button>

  <button οnclick="fun2()">不选</button>

  <button οnclick="fun3()">部分选中</button>

</Body>

</html>



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!