CheckBox 失效，点击的时候没有选上

最新推荐文章于 2025-06-06 09:17:31 发布
原创 最新推荐文章于 2025-06-06 09:17:31 发布 · 5.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#checkbox #失效 js #解决方案

本文讨论了在使用Checkbox时遇到点击无反应的问题，分析原因是Checkbox所在的div与其他div存在交集。通过调整布局，避免div之间的冲突，解决了Checkbox点击失效的问题。

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


CheckBox 


一般不会出现问题，但今天遇到个 点击的时候没有反映，


仔细检查后发现，checkbox所在的div跟别的div相交了，造成的这种情况。


----------------------偶记




                

        

    

    
  



    

      

        

            

              
                
                  陆益达
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
[vant] 使用vant的checkbox到页面，发现点击没有反应

				
			

			

				

					qubes的专栏
				

				

					10-17
					
					4404
					
				

			

		

		

			
				
使用vant的checkbox到页面，发现点击没有反应，怎么排查这个问题？
step1

搜索vant官方issue 和 搜索引擎 checkbox点击无效，没有人遇到
=> 这个问题应该是自己使用姿势导致的

step2

vant官方组件页面：可以点击
将checkbo放在当前白色卡片上：不可以点击
将checkbo放在当前白色卡片下面：可以点击
=》 checkbox在当前白色卡片有问题

step3

在有反应的checkbox上慢慢添加白色卡片结构和样式
在最外层样式加上之后就无法点击了
=

			
		

	



                

            
              



	

		

			

				
					
VC++ checkBox 按钮 点了没反应 or 不能点击。

				
			

			

				

					liuxie99的专栏
				

				

					10-29
					
					1418
					
				

			

		

		

			
				
碰到了checkBox 按钮 点了没反应 or 不能点击的问题

			
		

	



              


  
              

                


	

		

			

				
					
uniapp内置的checkbox选中不生效

				
			

			

				

					yy_demo的博客
				

				

					12-05
					
					3171
					
				

			

		

		

			
				
全局搜上面这行代码，然后注释掉z-index: 9;再全局搜上面这行代码，一起注释掉就可以了。

			
		

	





	

		

			

				
					
Sard-Uniapp中Checkbox禁用状态失效问题解析与解决方案

				
			

			

				

					gitblog_07070的博客
				

				

					06-06
					
					343
					
				

			

		

		

			
				
Sard-Uniapp中Checkbox禁用状态失效问题解析与解决方案
问题背景
在Sard-Uniapp组件库的开发过程中，开发者发现Checkbox组件的禁用状态(disabled)出现了失效的情况。从问题截图可以看到，虽然代码中设置了disabled属性，但实际渲染时复选框仍然保持可交互状态，这违反了表单控件的基本设计规范。
技术分析
复选框禁用失效通常涉及以下几个技术层面：

属性绑定机制...

			
		

	



		

			
		



	

		

			

				
					
el-checkbox点击没反应

				
			

			

				

					I'm your wrong princess
				

				

					10-23
					
					7010
					
				

			

		

		

			
				
el-checkbox点击没反应

解决思路：


<el-checkbox-group v-model="userid">
  <el-checkbox v-for="item in userlist" :key="item.name" :label="item.name"  
    @change="AAA(userid)">
  </el-checkbox&g...

			
		

	





	

		

			

				
					
uniapp——解决checkBox组件无法全选无法选中的bug

				
			

			

				

					花落微凉梦清幽的博客
				

				

					12-16
					
					6346
					
				

			

		

		

			
				
一、问题描述

在使用checkBox组件时，先点击全选，然后点击某一个或者几个选项不被选中，再点击全选，会发现这几项将无法被选中；

如下图：



二、问题分析

先来看看实现该部分的源代码：

html部分：


<view class="openLine">
			<view><text class="iconfont icon-fenzu1" style="margin-right:20rpx;"></text>设备</view>
			

			
		

	





	

		

			

				
					
el-checkbox-group 点击box 没反应，无法取消勾选（记一次debug的思路）

				
			

			

				

					Curry_On的博客
				

				

					06-06
					
					6291
					
				

			

		

		

			
				
今天工作时，碰到了项目代码中一个bug，表现出来的效果是：el-checkbox-group 点击 box 没反应，无法取消勾选。
也就是 box 默认是被勾选上的，但是点击取消勾选却没反应。
问题看起来还是比较奇怪，当然，最后bug还是被找出来了，这篇文章就来记录和分享一下我找问题的思路...

			
		

	





	

		

			

				
					
微信小程序点击控件没有反应

				
			

			

				

					东汄的博客
				

				

					01-11
					
					1万+
					
				

			

		

		

			
				
博主在做一个小程序时遇到了增加控件但点击没有任何反应的问题。



找到解决方法，win10的系统的缩放与布局为125%，需要将其改为100%，具体步骤如下：

1.点击win键：



2.点击设置



3.找到“系统”--&gt;“显示”--&gt;“缩放与布局”--&gt;“更改文本、应用等项目的大小” ，改为100%



回到微信开发者工具，刷新页面（Ctrl+s重新保存），点击控件即...

			
		

	





	

		

			

				
					
记一次el-checkbox包裹一层div，点击div勾选复选框，点击复选框却没反应的bug

				
			

			

				

					m0_65915285的博客
				

				

					07-27
					
					2141
					
				

			

		

		

			
				
如图，点击div时，点击div取消，勾选复选框是正常的，但是点击复选框却失效，这是由于冒泡，相当于改了两次checked的值，造成值没变，只需要给checkbox的点击事件取消冒泡就可以了。

			
		

	





	

		

			

				
					
显示checkBox后，item不能点击了

				
			

			

				

					学习是孤独的，如何才能耐得住孤独
				

				

					12-13
					
					1564
					
				

			

		

		

			
				
这个问题是因为，item的焦点和checkBox 的焦点冲突。在item的layout  。加如下属性即可解决。


 android:descendantFocusability="blocksDescendants"

			
		

	





	

		

			

				
					
input type button checkbox onclick 点击失效 无反应

					
热门推荐

				
			

			

				

					当富网络
				

				

					05-03
					
					2万+
					
				

			

		

		

			
				
全选
//全选/反选
function checked(){
	alert("x");
}全选

上面这段代码，你觉得逻辑肯定行得通，觉得也会alert出一个x字符串符号出来，但是事实往往不是我们认为的这样
上面的结果是，点击复选框后，完全无效


具体的原因是


js定义了一系列保留关键字，也类似java或者其他编程语言一样，拥有自己的属性，自己的语法
js保留了自己独有

			
		

	





	

		

			

				
					
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题

				
			

			

				

					12-11
				

			

		

		

			
				
在IE中，在使用checkbox或radio时，你会发现有时不能通过CheckBoxObject.checked = true或CheckBoxObject.setAttribute(‘checked’, true)的方法使checkbox或radio被预选中。 解决这个问题的方法就是利用checkbox或radio的defaultChecked的属性，将defaultChecked属性置为true即可,具体实现是 CheckBoxObject.setAttribute(‘defaultChecked’, true)或 CheckBoxObject.defaultChecked= true，这

			
		

	





	

		

			

				
					
uview+uniapp checkbox单选框 全选 全不选

				
			

			

				

					m0_66237295的博客
				

				

					10-09
					
					1032
					
				

			

		

		

			
				
uview

			
		

	





	

		

			

				
					
小程序操作checkbox无效

				
			

			

				

					weixin_44617465的博客
				

				

					02-21
					
					3458
					
				

			

		

		

			
				
小程序dom操作坑一
chooseall:function(event){
var allshow=event.currentTarget.dataset.turn
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var pro = currentPage.d...

			
		

	





	

		

			

				
					
uview的复选框u-checkbox：解决“只显示框，不显示选择文字”

				
			

			

				

					AKahong的博客
				

				

					02-21
					
					1914
					
				

			

		

		

			
				
图片: 
效果图：

			
		

	





	

		

			

				
					
checkbox全选与全不选的问题

				
			

			

				

					suming000的专栏
				

				

					02-15
					
					319
					
				

			

		

		

			
				
prop('checked',true) 和 prop('checked',false) 就不会出现这个问题了。)，那么只能使用一次，第二次使用的时候就没法全选了，后来查了一下，原来jquery1.8以上存在这个问题。今天遇到一个问题，就是js进行全选和全不选时，如果使用的是。是 attr('checked',true)  和。

			
		

	





	

		

			

				
					
table模板标签，批量多选失效的问题，tr td结构多选框失效相关问题

				
			

			

				

					纯纯打工人
				

				

					10-21
					
					541
					
				

			

		

		

			
				
临下班突然来了一个特别着急的BUG。

问题代码如下：


<table class="table table-border table-bordered table-hover table-bg table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" val

			
		

	





	

		

			

				
					
tkinter复选框选择后无效

				
			

			

				

					mazhen1991的博客
				

				

					09-22
					
					971
					
				

			

		

		

			
				
tkinter可以定义复选框进行操作，如：
def __init__(self):
    self.root = Tk()
    self.status = IntVar()
    Checkbutton(self.root, variable=self.status, command=self.func).place(x=100, y=30)
    self.root.mainloop(...

			
		

	





	

		

			

				
					
input checkbox的坑

				
			

			

				

					好大一只鸡的专栏
				

				

					11-25
					
					1548
					
				

			

		

		

			
				
/**   * 全选   */   function checkAll() {       $("input[name=ids]").attr("checked", true);   }     /**   * 全不选   */   function uncheckAll() {       $("input[name=ids]").attr("checked", false);   }  



			
		

	





	

		

			

				
					
el-checkbox-group点击无效

					
最新发布

				
			

			

				

					06-18
				

			

		

		

			
				
<think>我们正在解决el-checkbox-group点击事件无效的问题。根据提供的引用信息，我们可以总结出几个可能的原因和解决方案：可能原因1：事件冒泡问题（引用[1]中提到）-由于el-checkbox或el-checkbox-group的根元素是label，点击事件会触发两次，可能导致事件处理异常。可能原因2：数据绑定问题（引用[2]中提到）-绑定的数据（通常是数组）没有被正确初始化或更新，导致点击无效。可能原因3：版本问题或组件内部bug（引用[4]中提到）-在某些ElementUI版本中，el-checkbox-group可能存在bug，导致点击一个却全部选中。可能原因4：自定义内容导致的事件触发问题（引用[3]中提到）-在el-checkbox内添加了其他元素（如span），可能会干扰默认的点击事件。解决方案：1.针对事件冒泡问题：可以尝试在事件处理函数中使用`.stop`修饰符阻止事件冒泡，例如：```html<el-checkbox-group@click.native.stop="handleClick">...</el-checkbox-group>```或者检查是否因为事件冒泡导致事件被多次触发，从而引起逻辑错误。2.数据绑定问题：确保在组件的data选项中正确初始化绑定的数组，并且该数组是响应式的。例如：```javascriptdata(){return{checkedList:[]//这里必须是数组，且初始化为空数组或默认选中的值}}```在模板中绑定：```html<el-checkbox-groupv-model="checkedList"><el-checkboxlabel="option1"></el-checkbox><el-checkboxlabel="option2"></el-checkbox></el-checkbox-group>```注意：绑定的变量名必须一致，且确保在更新时保持数组类型。3.版本问题：如果遇到点击一个导致全部选中的问题（引用[4]），可能是由于版本bug。尝试升级ElementUI到最新版本，或者查看官方Issue是否有类似问题及解决方案。4.自定义内容问题：如果在el-checkbox内添加了自定义内容（如文字、图标等），并希望点击这些内容也能触发复选框的切换，需要确保这些内容被正确包裹在el-checkbox组件内，并且使用正确的插槽。避免在el-checkbox内部使用原生标签（如span）来放置文字，而应该使用组件提供的插槽或属性（如`label`属性）。如果确实需要自定义，可以尝试使用`slot`：```html<el-checkbox><span>自定义内容</span></el-checkbox>```同时，注意检查自定义内容是否阻止了事件冒泡或导致事件目标不正确。另外，根据引用[3]中的问题，在自定义内容后首次点击文字会触发勾选，刷新后重现。这可能是由于组件内部的初始化问题。可以尝试在组件的`mounted`生命周期中强制更新：```javascriptmounted(){this.$forceUpdate();}```如果以上方法都不能解决，请检查是否在同一个页面中重复使用了相同的`v-model`绑定的数组，或者是否有其他代码干扰了复选框的状态。建议按照以下步骤排查：-确保绑定的数据是数组类型，并且初始化为空数组（如果不需要默认选中的话）。-检查ElementUI版本，升级到最新稳定版。-简化代码，移除自定义内容，使用最简单的官方示例代码测试是否正常工作，然后逐步添加自定义内容以定位问题。-查看浏览器控制台是否有报错信息。如果问题依旧，请提供更详细的代码和复现步骤，以便进一步分析。相关问题：1.如何正确使用el-checkbox-group？2.ElementUI中如何阻止事件冒泡？3.如何升级ElementUI版本？4.在Vue中如何正确初始化响应式数组？</think>### el-checkbox-group 点击事件无效的原因及解决方案

#### 常见原因分析
1. **数据绑定问题** [^2][^4]  
   - 未正确初始化绑定数据（必须是数组类型）
   - 数据未声明在 Vue 响应式层（如未在 data 中定义）
   ```javascript
   // 错误示例：未在 data 中声明
   export default {
     created() {
       this.checkedList = [] // ❌ 非响应式
     }
   }

   // 正确示例
   export default {
     data() {
       return {
         checkedList: [] // ✅ 响应式数组
       }
     }
   }
   ```

2. **事件冒泡冲突** [^1][^3]  
   - 组件多层封装导致事件重复触发
   - 自定义内容干扰原生事件（如在 `<el-checkbox>` 内添加 span 标签）

3. **版本兼容性问题** [^4]  
   - Element UI 2.x 版本存在已知 bug（如 v2.2.2 点击全选问题）

4. **DOM 结构干扰**  
   - 动态渲染时未正确绑定 key
   - 嵌套表单导致数据更新异常

---

#### 解决方案

**1. 确保正确数据绑定**  
```html
<template>
  <el-checkbox-group v-model="checkedList"> <!-- 必须绑定数组 -->
    <el-checkbox v-for="item in options" 
                :key="item.id" 
                :label="item.value">
      {{ item.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      checkedList: [], // ✅ 声明为响应式数组
      options: [
        { id: 1, value: 'A', label: '选项A' },
        { id: 2, value: 'B', label: '选项B' }
      ]
    }
  }
}
</script>
```

**2. 处理事件冒泡问题**  
```html
<!-- 方案1：使用 native 修饰符 -->
<el-checkbox-group @click.native="handleClick">

<!-- 方案2：阻止 label 冒泡 -->
<el-checkbox @click.native.stop>
  <span @click.stop>自定义内容</span> <!-- 阻止内部元素冒泡 -->
</el-checkbox>
```

**3. 升级 Element UI 版本**  
```bash
# 升级到最新稳定版（>2.15）
npm install element-ui@latest
```

**4. 强制刷新组件** [^3]  
```javascript
// 在数据更新后强制刷新
this.$nextTick(() => {
  this.$forceUpdate()
})
```

**5. 检查动态渲染问题**  
```html
<!-- 添加唯一 key -->
<el-checkbox-group :key="componentKey">
```

---

#### 调试建议
1. 浏览器控制台检查：
   - 查看绑定数据是否为数组
   - 检查是否有 Vue 警告（如未声明响应式属性）
2. 简化测试：
   ```html
   <!-- 最小化测试组件 -->
   <el-checkbox-group v-model="testArr">
     <el-checkbox label="test"></el-checkbox>
   </el-checkbox-group>
   ```
3. 查看 Element UI 版本：
   ```javascript
   console.log(element.version) 
   ```

> 通过上述方案可解决 90% 的点击失效问题。若仍无效，建议提供可复现的代码示例进一步分析[^1][^2][^3][^4]。

---

### 相关问题
1. Element UI 中如何正确使用 `v-model` 绑定多选框组？  
2. Vue 响应式数据原理如何影响 UI 组件行为？  
3. 如何调试 Element UI 组件的事件冒泡问题？  
4. 不同版本的 Element UI 有哪些常见兼容性问题？

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值