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

最新推荐文章于 2023-07-30 08:10:28 发布

zhangzeyuaaa

最新推荐文章于 2023-07-30 08:10:28 发布

阅读量2.5k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhangzeyuaaa/article/details/45369219

版权

Web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

这篇文章要分享的是复选框的不确定状态，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>