jquery checkbox 多次选择后 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

<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]: 使用jQueryprop()方法来设置checked属性。 - 引用[5]: 获取checkboxchecked值。 关键点来自引用[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、付费专栏及课程。

余额充值