jquery checkbox选中、改变状态、change和click事件

本文详细介绍了使用jQuery操作Checkbox的方法,包括判断Checkbox的状态、为Checkbox赋值以及触发click和change事件的具体实现方式。

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

jquery判断checked的三种方法:
.attr('checked); //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
.prop('checked'); //16+:true/false
.is(':checked'); //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");
// $("#cb1").attr("checked",true);
jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦
// $("#cb1″).prop({checked:true}); //map键值对
// $("#cb1″).prop("checked",function(){
return true;//函数返回true或false
});

//记得还有这种哦:$("#cb1″).prop("checked","checked");

checkbox click和change事件

方法1:

$("#ischange").change(function() {
alert("checked");
});

方法2:

$(function(){
if ($.browser.msie) {
$('input:checkbox').click(function () {
this.blur();
this.focus();
});
};

方法3:
$("#ischange").change(function() {
alert("checked");
});
});

方法4:

$(function () {if ($.browser.msie) {$('input:checkbox').click(function () { this.blur(); this.focus(); }); }});

方法5:

$(document).ready(function(){
$("testCheckbox").change(function() {
alert("Option changed!");
});
});

作者:zqifa

出处:https://www.l1mn.com

<think>我们正在讨论JavaScript中处理checkbox选中事件的实现方法。需要参考之前的内容,但注意之前引用的内容并没有直接关于checkbox事件处理,因此我们需要根据标准JavaScriptjQuery知识来回答。用户要求的是checkbox的checked事件处理程序的示例代码,我们可以分别用原生JavaScriptjQuery来实现。在引用[2]中提到了jQuery事件绑定,引用[3]提到了radiobutton的复位,其中涉及了checked属性,但直接相关。我们将提供两种方式:1.原生JavaScript:使用addEventListener监听change事件,或者通过onchange属性。2.jQuery:使用.change()方法或.on('change',handler)方法。注意:checkbox状态变化通常监听change事件,也可以使用click事件,但change事件更准确(因为状态改变可能是通过键盘操作等)。示例代码将包括:-获取checkbox元素-绑定事件-在事件处理函数中检查checked属性同时,根据用户之前的问题,我们还需要提供相关问题。结构如下:一、原生JavaScript实现1.通过onchange属性(内联方式)2.通过addEventListener方法(推荐方式)二、jQuery实现1.使用.change()方法2.使用.on('change',handler)方法每个部分给出简短示例代码。最后,生成相关问题。</think> ### JavaScript 处理 Checkbox 选中事件的实现方法 在 JavaScript 中处理 checkbox选中状态变化事件,主要通过监听 **`change` 事件** 或 **`click` 事件** 实现。以下是原生 JavaScript jQuery 的完整实现示例: --- #### 一、原生 JavaScript 实现 ##### 1. 基础事件监听(推荐) ```html <input type="checkbox" id="subscribeCheckbox"> 订阅邮件通知 <script> const checkbox = document.getElementById("subscribeCheckbox"); // 监听 change 事件(兼容键盘操作) checkbox.addEventListener('change', function(e) { if (this.checked) { console.log("已订阅 ✔️"); // 执行订阅逻辑 } else { console.log("已取消订阅 ❌"); // 执行取消逻辑 } }); </script> ``` ##### 2. 多框批量处理 ```html <input type="checkbox" name="fruit" value="apple"> 苹果 <input type="checkbox" name="fruit" value="banana"> 香蕉 <input type="checkbox" name="fruit" value="orange"> 橙子 <button id="confirm">提交</button> <script> document.getElementById("confirm").addEventListener('click', () => { const selected = []; // 遍历所有同名checkbox document.querySelectorAll('[name="fruit"]:checked').forEach(checkbox => { selected.push(checkbox.value); }); console.log("已水果:", selected.join(", ")); // 示例:苹果, 橙子 }); </script> ``` --- #### 二、jQuery 实现(需引入库) ##### 1. 简化事件绑定[^2] ```javascript $(function() { $("#subscribeCheckbox").change(function() { if ($(this).is(':checked')) { $("#status").text("已订阅"); // 更新UI反馈 } else { $("#status").text("未订阅"); } }); }); ``` ##### 2. 动态生成复框的事件代理 ```javascript // 动态添加的checkbox也有效 $(document).on('change', '.dynamic-checkbox', function() { console.log(`项 ${this.value} 状态: ${this.checked ? "选中" : "未"}`); }); ``` --- #### 三、核心注意点 1. **事件择** - `change` 事件:更准确(兼容键盘空格键切换) - `click` 事件:可能误触(如点击 label 也会触发) - 优先使用 `change` 事件[^1] 2. **状态判断** 通过 `element.checked`(原生)或 `$(el).is(':checked')`(jQuery)获取状态,而非直接依赖事件对象。 3. **性能优化** 批量操作时使用事件委托(`event delegation`),避免循环绑定: ```javascript // 监听父元素而非每个checkbox document.getElementById("checkboxGroup").addEventListener('change', e => { if (e.target.matches('input[type="checkbox"]')) { console.log(e.target.value, e.target.checked); } }); ``` --- #### 实用场景示例:全/反 ```html <input type="checkbox" id="selectAll"> 全 <div id="itemList"> <input type="checkbox" class="item" value="1"> 项1 <input type="checkbox" class="item" value="2"> 项2 </div> <script> const selectAll = document.getElementById("selectAll"); selectAll.addEventListener('change', () => { const isChecked = selectAll.checked; document.querySelectorAll('.item').forEach(checkbox => { checkbox.checked = isChecked; }); }); </script> ``` > **原理**:全框的 `change` 事件触发时,遍历并同步子复框的 `checked` 属性。 --- ### 关键知识点总结 1. **事件类型**:主要使用 `change` 事件 2. **状态检测**:`element.checked` 返回布尔值 3. **jQuery 语法糖**:`$(el).change()` ≈ `addEventListener('change')`[^2] 4. **现代替代方案**:可使用 `MutationObserver` 监听 DOM 属性变化
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z_qifa

此处弱弱求打赏~~万一有好心人

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值