实现SELECT的全选，反选，AB选的JAVASCRIPT代码

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/45099

文章标签：

#javascript #ViewUI

本文介绍如何使用原生JavaScript实现对复选框的选择所有、反选和半选功能。针对不同按钮点击事件，通过获取指定名称的元素集合并对集合内元素类型进行判断来实现对复选框的状态修改。

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

参考网上，用原生JS粗糙实现。

我发现用UIKIT的BUTTON会自动刷新我那核心的模态窗口，只好用另外的LABEL或CODE标签了。

 
         $(
         ".btn-select-all"
         ).click(
         function
         (){ 
        
         var 
         deploypool_id =  $(
         this
         ).attr(
         "deploypool_id"
         ) 
        
         var 
         code_Values = document.getElementsByName(
         "check-server" 
         + deploypool_id); 
        
         for
         (i = 0;i < code_Values.length;i++){ 
        
         if
         (code_Values[i].type == 
         "checkbox"
         ){ 
        
         code_Values[i].checked = 
         true
         ; 
        
         } 
        
         } 
        
         }); 
        
         $(
         ".btn-select-reverse"
         ).click(
         function
         (){ 
        
         var 
         deploypool_id =  $(
         this
         ).attr(
         "deploypool_id"
         ) 
        
         var 
         code_Values = document.getElementsByName(
         "check-server" 
         + deploypool_id); 
        
         for
         (i = 0;i < code_Values.length;i++){ 
        
         if
         (code_Values[i].type == 
         "checkbox"
         ){ 
        
         code_Values[i].checked = 
         false
         ; 
        
         } 
        
         } 
        
         }); 
        
         $(
         ".btn-select-half"
         ).click(
         function
         (){ 
        
         var 
         deploypool_id =  $(
         this
         ).attr(
         "deploypool_id"
         ) 
        
         var 
         code_Values = document.getElementsByName(
         "check-server" 
         + deploypool_id); 
        
         for
         (i = 0;i < code_Values.length;i++){ 
        
         if 
         (i % 2 == 0){ 
        
         if
         (code_Values[i].type == 
         "checkbox"
         ){ 
        
         code_Values[i].checked = 
         true
         ; 
        
         } 
        
         } 
        
         } 
        
         });