jquery checkbox 多次选择后 checked失效

最新推荐文章于 2020-04-11 12:28:26 发布
转载 最新推荐文章于 2020-04-11 12:28:26 发布 · 688 阅读 · 0
文章标签：

#checkbox #jQuery #多次选中失效 #checked

本文探讨了在jQuery中使用attr与prop方法的区别，并通过一个具体的案例解释了为什么在处理如checked这类布尔属性时，应该使用prop而不是attr。此外，还提供了从1.6.1版本开始引入prop方法的背景信息。

之前我是这样写的

[javascript]  view plain  copy
  1. <pre name="code" class="javascript">    var allIsChecked=$('#checkedAll').is(':checked');  
  2.     var checkboxes = $('input[name="checkbox"]');  
  3.     allIsChecked?checkboxes.attr('checked',true):checkboxes.attr('checked',false);  


 
第一次点的时候好用，但是第二次之后就不行了。 

 
 

 后来查资料改成下面这样就好用了
 

 
 
 
  
 
   [javascript] 
   view plain
    copy 
   
 
   
 
   
  
 
 
 
 
  1.  var allIsChecked=$('#checkedAll').is(':checked');  
  2.  var checkboxes = $('input[name="checkbox"]');  
  3.  allIsChecked?checkboxes.prop('checked',true):checkboxes.prop('checked',false);  
 

 

 

 
 
 

 原因是jQuery自1.6.1开始增加了一个prop()方法，关于attr和prop的使用区别总结起来就是具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()，具体见下表：
 

 
 

 
 

 
 
 

 转载自：http://blog.youkuaiyun.com/boylong12/article/details/46412669

                

        

    

    
  



    



                



	

		

			

				
					
jquery中checkbox全选失效的解决方法

				
			

			

				

					10-25
				

			

		

		

			
				
主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下

			
		

	



                

            
              



	

		

			

				
					
Jquery attr(checked) 返回checked或undefined 获取选中失效

				
			

			

				

					12-12
				

			

		

		

			
				
假设我们现在需要这样的场景：页面上有一个checkbox，我们期望通过Jquery来获得它是否选中，或者通过Jquery来让它被选中。 在JQ1.6之前的版本，我们会这样写我们的代码： 代码如下: <input type=’checkbox’ id=...

			
		

	



              


  
              

                


	

		

			

				
					
jQuery中对checkbox设置checked无用解决办法

				
			

			

				

					
				

				

					05-10
					
					413
					
				

			

		

		

			
				
1. 对html中的多选框设置选择和取消选择，如 $("#id").attr('checked',true);$("#id").attr('checked',false)。如果在调试栏中查看elements属性，可以看出，checked是已经设置成功了的，但是在html中不能表现出来。
2. 解决办法 ：用prop设置。prop的值为ture或者false.方法如下：$("#id"...

			
		

	





	

		

			

				
					
jQuery多次选中checkbox失效

				
			

			

				

					dongguan5448的博客
				

				

					02-24
					
					179
					
				

			

		

		

			
				
在做项目的过程中，遇到一个问题。就是使用jquery的attr方法即

$("#aaa").attr('checked',true);
$("#aaa").attr('checked',false);

多次使用的情况下，第二次就会失效，出现再也无法选中的情况。
上网查了一下，发现可以使用prop方法代替attr即可

$("#aaa").prop('che...

			
		

	



		

			
		



	

		

			

				
					
jquery attr()改变checked状态失效

				
			

			

				

					
				

				

					06-05
					
					172
					
				

			

		

		

			
				
在做多选选下拉框时，用jQuery的 attr() 改变input的checked状态，实现全选功能的时候发现，第一次点击有效，之后点击全选功能失效。
找不出哪里出了问题，查证后发现，这是jQuery的一个bug，在jQuery1.6之后的版本中，改变元素的Boolean类型属性用prop()才能生效，其他类型属性则继续使用attr();

转载于:https://www.cnblog...

			
		

	





	

		

			

				
					
jQuery/js checkbox多次选中后失效

				
			

			

				

					Power的博客
				

				

					09-07
					
					736
					
				

			

		

		

			
				
今天在做项目过程中使用jquery的attr属性完成一个功能及选择语音坐席的时候勾选语音及短信选项即 
$(“#voiceSeat”).click(function(){

var isCheck=$(this).is(':checked');
if(isCheck){
    $(&quot;#voice&quot;).prop({
        &quot;checked&quot;:true,
        &quot;disabled...

			
		

	





	

		

			

				
					
jquery checkbox无法用attr()二次勾选问题的解决方法

				
			

			

				

					10-21
				

			

		

		

			
				
在jQuery中，处理复选框（checkbox）的状态时，可能会遇到一个问题，即使用`attr()`方法无法正确地进行二次勾选。这个问题在描述中已经提到，当尝试通过`attr()`方法改变checkbox的选中状态时，特别是在反复切换的...

			
		

	





	

		

			

				
					
JQuery 设置checkbox值二次无效的解决方法

				
			

			

				

					10-21
				

			

		

		

			
				
但在使用JQuery操作checkbox时，尤其是在异步操作如ajax请求中，可能会遇到设置checkbox值失效的问题。下面将详细解析如何解决JQuery设置checkbox值二次无效的问题，并分享相关的知识点。  首先，需要了解JQuery中对...

			
		

	





	

		

			

				
					
使用prop解决一个checkbox选中后再次选中失效的问题

				
			

			

				

					08-30
				

			

		

		

			
				
现在，我们可以看到，使用prop来设置checkbox的checked属性可以很好地解决checkbox选中后再次选中失效的问题。但是，这并不是唯一的解决方案，我们还可以使用其他方法来解决这个问题，例如使用attr来设置checked属性...

			
		

	





	

		

			

				
					
解决jQuery操作checkbox第二次失效的问题

				
			

			

				

					无远弗届
				

				

					08-15
					
					4625
					
				

			

		

		

			
				
直接上代码：<html>
    <head>
        <script src="jquery.js"></script>
        <script>            $(function(){
                $("#selectAll").click(function(){                        $(":checkbox").css("

			
		

	





	

		

			

				
					
jquery checkbox checked无效（第一次有效，后面就没反应了）

				
			

			

				

					weixin_33980459的博客
				

				

					09-28
					
					360
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
input中使用了ng-model 默认的选中checked就失效了？

				
			

			

				

					qq_36236621的博客
				

				

					12-13
					
					646
					
				

			

		

		

			
				
input中使用了ng-model 默认的选中checked就失效了？
这是angularJs导致的失效，改用angularJs的ng-checked="1"就好了



			
		

	





	

		

			

				
					
checkbox属性checked="checked"通过js已设置后不生效

				
			

			

				

					qq_30616169的博客
				

				

					04-11
					
					3512
					
				

			

		

		

			
				
1.通过attr('checked','checked')来设置checkbox时，重复点击，虽然checked属性设置正确，但是checkbox没有被勾选，如下代码：（代码是全选功能）


$('#ckAll').click(function(){
	if($('#ckAll ').attr('checked') == 'checked'){
		$('#ckAll').removeAtt...

			
		

	





	

		

			

				
					
关于jquery 1.9以上多次点击checkbox无法选择的bug解决

				
			

			

				

					a413883127的专栏
				

				

					05-29
					
					976
					
				

			

		

		

			
				
在jquery1.9之前，我们对于一个checkbox对象来进行重复选择或者取消，我们可以使用这个方法

			
		

	





	

		

			

				
					
设置input checked 失效 解决方案

				
			

			

				

					zlzbt
				

				

					07-09
					
					4468
					
				

			

		

		

			
				
小编在写代码的过程中用到了input标签，然而小编简单的以为使用老套的jquery的attr()即可，没想到入了一个大坑，审查匀速时即使看到 <input type ='radio' checked='checked'/> 依然没有起到选中的效果，小编就疯狂百度了一下，学习到了jQuery 1.6新增函数

主要就是将 attr() 换成prop 即可

prop()函数

下面...

			
		

	





	

		

			

				
					
jQuery 更改checkbox的状态,无效的解决方法

				
			

			

				

					XiChuan的博客
				

				

					04-08
					
					1380
					
				

			

		

		

			
				
今天写页面遇到复选框动态全选或全不选问题，正常写法如下：



?




1



$("#tb").find("input[type='checkbox']").attr("checked","checked");








but！第一次点击全选按钮input显示对勾，第二次就不行了，查了下有建议用prop的，亲测有效。那两者有啥区别呢？

			
		

	





	

		

			

				
					
jquery与checkbox的checked属性的问题

				
			

			

				

					asp.net常见问题分析，网站开发常见问题总结,ningxi_博客
				

				

					12-30
					
					1万+
					
				

			

		

		

			
				
jquery与checkbox的checked属性的问题，讲的是控件
1、页面加载成功后，点击选中或取消选中该checkbox，checkbox属性里的checked属性不会根据该checkbox是否选中而变化
2、checkbox里的onchange或onclick方法里用jquery的attr方法获取checked是看得到的checked属性的值与它是否给钩上没有关系
3、使用docum

			
		

	





	

		

			

				
					
Jquery利用is(“:checked”)判断单选框是不是被选中

					
热门推荐

				
			

			

				

					XiaoYi_i的博客
				

				

					09-21
					
					2万+
					
				

			

		

		

			
				
性别：

 男 
 女

			
		

	





	

		

			

				
					
input的type属性checkbox 默认checked，取消勾选后checked还是true

					
最新发布

				
			

			

				

					08-22
				

			

		

		

			
				
<think>首先，用户的问题是：在HTML中，当input的type为checkbox时，默认设置checked属性后，即使取消勾选，checked属性仍然为true的问题。具体来说，用户想知道为什么取消勾选后，checked属性仍然为true。

从用户的问题中，我可以看出用户对HTML的checkbox行为有误解。用户设置了checked属性，但取消勾选后，期望checked属性改变，但实际上它没有改变。

现在，回顾系统指令：
- 所有行内数学表达式使用$...$格式。
- 独立公式使用$$...$$格式并单独成段。
- LaTeX语法正确。
- 使用中文回答。
- 生成相关问题。
- 回答中引用的段落末尾自然地添加引用标识。
- 回答结构清晰，帮助用户逐步解决问题。

用户提供了几个引用，我需要参考这些引用：
- 引用[1]: 解释了如何用JavaScript和jQuery设置checkbox的选中状态，并强调checked属性只是初始状态，不能用于动态改变。
- 引用[2]: 关于如何用CSS改变checkbox样式和JS实现点击确认后勾选checkbox。
- 引用[3]: 指出checked属性可以有多种形式，但都是表示初始选中状态。
- 引用[4]: 使用jQuery的prop()方法来设置checked属性。
- 引用[5]: 获取checkbox的checked值。

关键点来自引用[1]: checked属性是用于设置初始状态的，一旦页面加载后，用户交互会改变实际状态，但DOM属性不会自动更新。要获取当前状态，应该使用JavaScript的checked属性，而不是HTML属性。

我的回答需要：
1. 解释为什么checked属性在取消勾选后仍然为true。
2. 提供正确的解决方案。
3. 结构清晰，逐步引导用户。
4. 使用中文。
5. 在末尾生成相关问题。

步骤：
1. **理解问题**：HTML的checked属性是用于设置初始状态的。当页面加载时，它决定checkbox是否被选中。但一旦用户交互发生（如取消勾选），这个属性不会改变；它始终是初始值。要获取当前状态，需要使用JavaScript的checked属性。
2. **解释原因**：checked属性是HTML属性，代表初始状态。DOM属性checked是动态的，反映当前状态。
3. **解决方案**：使用JavaScript来获取或设置当前状态，而不是依赖HTML属性。
4. **引用支持**：从引用中，特别是[1]和[3]，强调checked属性是初始的。
5. **生成相关问题**：在末尾添加2-3个相关问题。

回答结构：
- **引言**：确认问题并简要解释。
- **原因分析**：详细解释为什么checked属性不变。
- **正确方法**：展示如何正确获取当前状态。
- **示例代码**：提供简单代码示例（使用行内代码或代码块）。
- **结论**：总结要点。
- **相关问题**：生成相关问题。

确保LaTeX：用户的问题中没有数学表达式，但如果有，我会用$...$。这里可能不需要。

使用引用：在解释时，自然地添加引用标识，如[^1]。

最终回答大纲：
1. 确认问题：是的，这是一个常见误解。
2. 解释：HTML的checked属性是初始状态设置，不会随用户交互改变。实际状态存储在DOM的checked属性中。
3. 解决方案：使用JavaScript的checked属性来获取或设置当前状态。
4. 示例：提供JS代码。
5. 生成相关问题。</think>### HTML input type="checkbox" 默认checked属性问题解析

您提到的问题是一个常见的HTML误解：当为`<input type="checkbox">`设置默认`checked`属性后，即使取消勾选，通过DOM检查时`checked`属性仍显示为`true`。这源于HTML属性和DOM属性之间的区别。下面我将逐步解释原因并提供解决方案。

#### 1. **问题原因：HTML属性与DOM属性的区别**
   - **HTML `checked`属性是静态的**：它仅在页面加载时设置初始状态。例如：
     ```html
     <input type="checkbox" id="myCheckbox" checked> <!-- 默认选中 -->
     ```
     这里的`checked`属性是HTML标记的一部分，它只负责初始化状态。一旦页面加载完成，用户交互（如取消勾选）不会改变这个HTML属性。引用[1]明确指出：*checked属性规定在页面加载时应该被预先选定的input元素*，但*不能用来动态改变checkbox的状态*[^1]。
   - **DOM `checked`属性是动态的**：实际选中状态由JavaScript的DOM属性控制。当用户取消勾选时，DOM的`checked`属性会变为`false`，但HTML属性保持不变。例如：
     ```javascript
     console.log(document.getElementById('myCheckbox').checked); // 取消勾选后输出 false
     console.log(document.getElementById('myCheckbox').getAttribute('checked')); // 始终输出 "checked"（或初始值）
     ```
     引用[3]补充：*checked属性可以有多种形式（如checked="checked"或checked="true"），但都只影响初始状态*[^3]。

#### 2. **为什么取消勾选后HTML属性仍为true？**
   - 浏览器渲染机制：HTML属性在解析后固定不变，而DOM属性实时反映用户操作。
   - 常见误区：开发者误以为修改HTML属性（如`setAttribute('checked', false)`）能更新状态，但这无效。引用[1]强调：*只要修改过选中状态（通过点击或JS），再操作HTML属性完全失效*[^1]。

#### 3. **正确解决方案：使用DOM属性获取/设置状态**
   要动态处理checkbox状态，请使用JavaScript或jQuery操作DOM的`checked`属性：
   - **原生JavaScript**：
     ```javascript
     // 获取当前状态（true/false）
     const isChecked = document.getElementById('myCheckbox').checked;
     
     // 设置状态（例如取消选中）
     document.getElementById('myCheckbox').checked = false;
     ```
   - **jQuery（推荐方法）**：
     ```javascript
     // 获取状态
     const isChecked = $('#myCheckbox').prop('checked');
     
     // 设置状态（取消选中）
     $('#myCheckbox').prop('checked', false);
     ```
     引用[4]说明：*使用prop()函数设置checked属性是正确方式*[^4]。避免使用`attr()`，因为它操作HTML属性而非DOM属性。

#### 4. **示例：完整代码演示**
   ```html
   <!DOCTYPE html>
   <html>
   <body>
     <input type="checkbox" id="testCheckbox" checked> 默认选中
     <button onclick="checkStatus()">检查状态</button>
     <script>
       function checkStatus() {
         const checkbox = document.getElementById('testCheckbox');
         console.log("DOM checked属性: " + checkbox.checked); // 用户操作后变化
         console.log("HTML checked属性: " + checkbox.getAttribute('checked')); // 始终为"checked"
       }
     </script>
   </body>
   </html>
   ```
   运行此代码，点击按钮观察控制台：取消勾选后，`DOM checked属性`输出`false`，但`HTML checked属性`保持`"checked"`。

#### 5. **最佳实践总结**
   - **初始设置**：用HTML `checked`属性定义默认状态。
   - **动态操作**：始终用JavaScript的`.checked`（原生）或jQuery的`.prop('checked')`获取/设置当前状态。
   - **避免陷阱**：不要依赖HTML属性跟踪实时状态，引用[5]提到：*直接使用this.checked获取值更可靠*[^5]。

通过以上步骤，您可以正确管理checkbox状态。核心是区分HTML属性（静态初始值）和DOM属性（动态当前值）。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值