jQuery 判断 checkbox 是否被选中的几种方法

本文详细介绍了如何使用JavaScript获取HTML表单元素的值,包括文本框、文本区域、单选按钮、复选框、下拉框等,并提供了清空和填充表单元素内容的方法。

// 获取一组radio 被选中项的值

var item = $('input[@name=items][@checked]' ).val();

// 获取select 被选中项的文本

var item = $("select[@name=items] option[@selected]" ).text();

//select 下拉框的第二个元素为当前选中值

$('#select_id' )[0].selectedIndex = 1;

//radio 单选组的第二个元素为当前选中值

$('input[@name=items]' ).get (1).checked = true ;

/ / 获取值:

// 文本框,文本区域:

$("#txt" ).attr("value" )

// 多选框checkbox :

$("#checkbox_id" ).attr("value" )

// 单选组radio :

$("input[@type=radio][@checked]" ).val();

// 下拉框select :

$('#sel' ).val();

// 控制表单元素:

// 文本框,文本区域:

$("#txt" ).attr("value" ,'' );// 清空内容

$("#txt" ).attr("value" ,'11' );// 填充内容

// 多选框checkbox :

$("#chk1" ).attr("checked" ,'' );// 不打勾

$("#chk2" ).attr("checked" ,true );// 打勾

if ($("#chk1" ).attr('checked' )==undefined) 或者 if ($("#selectAllContacts:checked"))// 判断是否已经打勾

// 单选组radio :

$("input[@type=radio]" ).attr("checked" ,'2' );// 设置value=2 的项目为当前选中项

// 下拉框select :

$("#sel" ).attr("value" ,'-sel3' );// 设置value=-sel3 的项目为当前选中项

$("<option value='1'>1111</option><option value='2'>2222</option>" ).appendTo("#sel" )// 添加下拉框的option

$("#sel" ).empty() // 清空下拉框

<think>我们要使用jQuery来修改checkbox选中状态。jQuery提供了几种方法来实现这个功能,最常用的是使用.prop()方法,因为对于布尔属性(如checked、selected等),使用.prop()更为合适。 我们可以通过设置checkbox元素的checked属性为true或false来改变其选中状态。 例如: 1. 选中一个checkbox:$('#myCheckbox').prop('checked', true); 2. 取消选中一个checkbox:$('#myCheckbox').prop('checked', false); 另外,也可以使用.attr()方法,但在jQuery 1.6之后,推荐使用.prop()来处理布尔属性,因为.attr()方法在操作布尔属性时可能会遇到一些不一致的问题。 还可以使用.click()方法模拟点击来改变状态,但这种方法可能会触发事件处理函数,所以直接设置.prop()更为直接。 下面是一个示例代码,演示如何通过按钮来控制checkbox选中和取消选中。</think>### jQuery 修改 Checkbox 选中状态 使用 jQuery 修改 checkbox选中状态主要依赖 `.prop()` 方法,因为 `checked` 是 DOM 元素的属性(property),而非 HTML 特性(attribute)。以下是详细解决方案: ```html <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <!-- 示例 Checkbox --> <input type="checkbox" id="myCheckbox"> 同意协议 <!-- 操作按钮 --> <button id="checkBtn">选中</button> <button id="uncheckBtn">取消选中</button> <button id="toggleBtn">切换状态</button> <script> // 1. 选中 Checkbox $("#checkBtn").click(function() { $("#myCheckbox").prop("checked", true); }); // 2. 取消选中 Checkbox $("#uncheckBtn").click(function() { $("#myCheckbox").prop("checked", false); }); // 3. 切换 Checkbox 状态 $("#toggleBtn").click(function() { const currentState = $("#myCheckbox").prop("checked"); $("#myCheckbox").prop("checked", !currentState); }); </script> </body> </html> ``` ### 代码解释: 1. **`.prop("checked", true)`** 将 `checked` 属性设置为 `true`,强制选中复选框。 2. **`.prop("checked", false)`** 将 `checked` 属性设置为 `false`,强制取消选中。 3. **切换状态逻辑** - 获取当前状态:`$("#myCheckbox").prop("checked")` - 设置相反状态:`!currentState` ### 注意事项: - **避免使用 `.attr()`**: `.attr()` 修改的是 HTML 特性(初始),而 `.prop()` 修改的是 DOM 当前属性(实时状态),因此操作 `checked` 必须用 `.prop()`。 - **事件触发**: 直接修改 `.prop()` 不会触发 `change` 事件。如需触发,需手动调用 `.trigger("change")`: ```javascript $("#myCheckbox").prop("checked", true).trigger("change"); ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值