Jquery点击事件只触发一次的解决方法

本文探讨了在jQuery中attr()与prop()方法的区别及应用场景。指出从jQuery1.6开始,为了更准确地处理DOM元素的状态属性,引入了prop()方法。通过一个具体的案例,演示了如何使用prop()来解决checkbox全选功能只执行一次的问题。

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

方案一:

<script>
$(function () { 
$("#all").click(function(){    
    if(this.checked){    
        $("#list :checkbox").attr("checked", true);   
    }else{    
        $("#list :checkbox").attr("checked", false); 
    }    
});
});
</script>


方案二:

<script>
$(function () { 
$("#all").click(function(){    
    if(this.checked){    
        $("#list :checkbox").prop("checked", true);   
    }else{    
        $("#list :checkbox").prop("checked", false); 
    }    
});
});
</script>

今天在设置checkbox全选功能时,使用方案一在测试时发现全选功能在页面不刷新的情况下只能执行一次, 查看官方文档, 才知道从 jQuery 1.6 开始新增了一个方法 prop(),但是一直都没有使用过。

从中文意思看,两者分别是获取/设置 attributes 和 properties 的方法,那么为什么还要增加 prop() 方法呢?

Before jQuery 1.6, the .attr() method sometimes took property values
into account when retrieving some attributes, which could cause
inconsistent behavior.

因为在 jQuery 1.6 之前,使用 attr() 有时候会出现不一致的行为。

那么,什么时候使用attr(),什么时候使用prop()?

To retrieve and change DOM properties such as the checked, selected,
or disabled state of form elements, use the .prop() method.

根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

到此,将 attr(‘checked’) 改成 prop(‘checked’) 即可修复提的 issues 了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值