checkbox半选indeterminate属性_vue2 多级树 checkbox 半选中 indeterminate 实现-CSDN博客

本文链接：https://blog.csdn.net/sunddy_x/article/details/105097171

本文详细介绍了如何在网页中使用checkbox的indeterminate属性实现半选效果，并提供了完整的HTML和JavaScript代码示例。通过监听子项checkbox的状态变化，更新全选框的indeterminate属性，达到动态显示半选状态的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天做了一个checkbox复选框半选效果，效果如下图：

要想得到该效果，使用checkbox的indeterminate属性，表示复选框处于“尚未明确是否选取”状态。

在JS中，使用布尔属性对indeterminate属性进行赋值，当为true时，复选框将显示为不明状态，代码如下：

var obj = document.getElementById("obj");

obj.indeterminate = true;

注：此属性为DOM对象属性，jquery对象不可使用（自己踩的坑）

完整代码如下：

html：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <div>
           <ul>
               <label>
                   <input id="chkAll" type="checkbox">系统管理
               </label>
           </ul>
           <div id="my">
               <ul>
                   <div>
                       <ul>
                           <label><input id="ck2" type="checkbox">商城设置</label>
                       </ul>
                   </div>
                   <div>
                       <ul>
                           <label><input id="ck3" type="checkbox">商城设置</label>
                       </ul>
                   </div>
               </ul>
           </div>
       </div>
   </body>
   <script src="./js/jquery-1.9.1.min.js"></script>
   <script src="./js/ck.js"></script>
</html>

js：

var ckb = $('#my').find('input[type="checkbox"]');
$('#chkAll').click(function(){
if(this.checked){
//选中了全选，下面的全勾中
ckb.prop('checked',true);
}else{
ckb.prop('checked',false);
}
});
ckb.click(function(){
   let i = 0;
   ckb.each(function(){
       if(this.checked) {
           i++;
       }
   })
   if(i == 0) {
       //全不选
       document.getElementById("chkAll").indeterminate = false;
       $('#chkAll').prop('checked',false);
   } else if(i < ckb.length) {
       //半选
       document.getElementById("chkAll").indeterminate = true;
   } else if(i == ckb.length) {
       //全选
       document.getElementById("chkAll").indeterminate = false;
       $('#chkAll').prop('checked',true);
   } else {
       alert("出错")
   }
})