关于JQuery设置checkbox checked 的问题或者原生js设置checkbox checked问题

最新推荐文章于 2023-03-30 11:46:18 发布
原创 最新推荐文章于 2023-03-30 11:46:18 发布 · 688 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#原生js设置checkbox问题 #JQuery设置checkbox问题

本文介绍了使用原生JavaScript及jQuery两种方式来实现切换网页上Checkbox的状态，包括获取当前状态和设置新的状态。

<label for="">城市</label><input type="checkbox" class="checkBox">

1.原生js实现

if (document.getElementsByClassName('checkBox')[0].checked) {
       document.getElementsByClassName('checkBox')[0].checked=false;
}else {
       document.getElementsByClassName('checkBox')[0].checked=true;

 }

2.jquery实现法1）

if ($('.checkBox')["0"].checked) {
                $('.checkBox')["0"].checked=false;
            }else{
                $('.checkBox')["0"].checked=true;
            }

jquery实现法2）

if ($('.checkBox').prop("checked")) {
                $('.checkBox').prop("checked",false);
            }else{
                $('.checkBox').prop("checked",true);
            }

QIANG123___
关注
浅析jquery与checkbox的checked属性的问题
10-22
jQuery与checkbox的checked属性之间的关系是前端开发者经常需要处理的问题。在Web开发过程中，复选框（checkbox）是用来让用户选择多个选项的常用表单控件，而jQuery是一个广泛使用的JavaScript库，它简化了HTML文档...
Jquery 获取checkbox的checked问题
12-03
在jQuery中，获取复选框（checkbox）的`checked`状态是一个常见的操作，但往往存在一些误解。在讨论这个问题之前，我们先明确HTML中的`checked`属性和jQuery中获取该属性值的区别。 在HTML中，当一个复选框被选中时...
checkbox属性checked="checked"通过js已设置，但是不勾选
weixin_34025051的博客
01-02 1124
1.通过attr('checked','checked')来设置checkbox时，重复点击，虽然checked属性设置正确，但是checkbox没有被勾选，如下代码：（代码是全选功能） $('#ckAll').click(function(){ if($('#ckAll ').attr('checked') == 'checked'){ ...
js中使用getElementsByClassName获取class对象
实际工作与学习当中的随记
08-09 6835
前端开发一般不需要过多考虑性能问题，但你想在性能上追求极致的话，一定要知道jQuery性能很差。所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。......
已选中jquery set复选框
CHCH998的博客
05-14 397
I already tried all the possible ways, but I still didn't get it working. 我已经尝试了所有可能的方法，但我仍然没有得到它的工
原始js实现checkbox全选和取消全选
weixin_44540436的博客
03-09 1万+
Checkbox 对象 Checkbox 对象代表一个 HTML 表单中的 一个选择框。 在 HTML 文档中 每出现一次，Checkbox 对象就会被创建。 在每个input里都添加Checkbox 对象 &lt;ul&gt; &lt;li&gt;&lt;input type="checkbox" name="" id="selectAll" value=""/&gt;&am
checkbox
aimei09413的博客
04-21 117
创建：<input type="checkbox" id="ck"> 选中取消： 原生js: document.getElementById("ck").checked = true[false]; Jquary: $("#ck").attr("checked", true[false]); 获取是否选中： 原生js:var d = document.getEl...
JQuery 设置checkbox值二次无效的解决方法
10-21
但在使用JQuery操作checkbox时，尤其是在异步操作如ajax请求中，可能会遇到设置checkbox值失效的问题。下面将详细解析如何解决JQuery设置checkbox值二次无效的问题，并分享相关的知识点。 首先，需要了解JQuery中对...
innerHTML无法直接对document.getElementsByClassName等进行操作，与Elements返回数据类型有关
lengzhuji的博客
03-30 314
当把let ul = document.getElementsByClassName('common')改为let ul = document.getElementsByClassName('common')[0]的时候就可以正常的进行操作，也不会不出结果。在Elements带复数形式中返回的数据类型为数组，且数组中的数据为对象的形式。主要的原因就是没有具体定位到需要的节点上，数组无法被直接操作。这里innerHTML无法为ul添加我写的字符串unm，
checkbox已设置为checked--true-但不勾选问题解决方法（只第一次勾选有效）
热门推荐
东方败败的博客
04-10 5万+
一、出现的问题及解决方法： 今天在写一个table相关插件的时候无意中发现了这样一个问题，记得以前在写这种控制checkbox选中与非选中的代码时并没有这种bug，当时也是用的checked属性，而现在却行不通了。于是乎做了以下测试，测试demo：一个按钮控制checkbox的选中状态。 测试js代码： $("#test_btn").click(function(){
jQuery获取和设置checkbox的checked属性小结
weixin_33958585的博客
04-20 497
最近在项目中使用到jQuery设置checkbox，使用场景是页面上有三类单选框，一个是全选所有页数据(id='cb1'),一个是选择当前页(id='cb2')，一个是选择一条(name='cb3')，也算常用的场景。 一开始全选框的点击事件这样写： $("#cb1",this).click(function(){ var al...
jQuery获取和设置checkbox的checked属性
gcy_rose的博客
01-20 663
在jquery里，有两种操作元素属性的方法，一种是attr()，另一种是prop()。 attr()的属性在页面首次加载时就确定。当页面初始状态checkbox没有选中，(&amp;amp;amp;amp;quot;.breedinput&amp;amp;amp;amp;quot;).attr(&amp;amp;amp;amp;quot;checked&amp;amp;amp;amp;quot;)为undefined，点击选中后，还是undefined，不管选中与否((&a
关于 CheckBox 控件 setChecked() 和 performClick() 方法的问题
u010216716的专栏
07-05 4133
1、场景： 我需要通过Java代码设置CheckBox的状态和调用其监听的onClick方法。于是我这样做： checkBox.setChecked(true); checkBox.performClick();onClick方法倒是响应了，但是状态却没有改变，check的状态永远都是false，一时找不到什么原因。 2、解决： 后来通过实验发现，原来performClick就相当
用jQuery对checkbox的checked进行操作
老郭的博客
03-05 8060
注意： 操作checkbox的checked,disabled属性时jquery1.6以前版本用attr, 1.6以上（包含）建议用prop 1、根据id获取checkbox $("#Checkbox1"); 2、获取所有的checkbox $("input[type='checkbox']");//或者$(":checkbox"); 3、获取所有选中的checkbo...
CheckBox调用setChecked方法调用onCheckedChanged方法问题
vaechr的博客
12-22 1万+
在使用CheckBox控件时，难免不使用setChecked方法设置控件是否选中，但是每次调用setChecked方法时，都会去执行onCheckedChanged方法，有时候我们不需要在设置选中状态的时候，监听是否选中、可是使用控件是否点击的方法来进行判断，方法如下： mCbCheck.setOnCheckedChangeListener(new CompoundButton.
jquery 设置input的checkbox属性为checked
最新发布
04-09
<think>好的，用户想知道如何使用jQuery将复选框设置为选中状态。我需要回忆一下相关的jQuery方法。 首先，我记得jQuery中设置属性通常用attr()方法。比如，设置checked属性为"checked"，应该像这样：$('selector').attr('checked', 'checked')。不过，用户提供的引用[1]中提到，使用attr()方法可以获取或设置属性。但可能在某些情况下，比如动态操作时，prop()方法更可靠，比如在jQuery 1.6之后，推荐用prop()来处理布尔属性，如checked、selected等。不过用户给的例子中引用[1]和[2]都用了attr()，所以可能需要说明两种方法。 另外，用户提供的引用[2]中有一个例子，使用了attr('checked','checked')来设置复选框选中。这说明在jQuery UI的dialog打开事件中，他们用这种方式设置。所以用户可能需要兼容旧版本的情况，或者在某些情况下attr()仍然有效。 然后，引用[3]中的表单提交处理，可能涉及到动态生成的复选框，但这里的问题主要是设置checked状态，所以暂时不需要处理动态元素的问题。引用[4]是关于移除disabled属性，和设置checked无关，但可能说明用户对jQuery操作属性有基本了解。 现在需要确认的是，正确的方法是什么。根据jQuery的最佳实践，对于布尔属性如checked，应该使用prop()方法，因为checked是一个属性/特性，而不是属性值。例如，$('#checkbox').prop('checked', true)会更直接有效，特别是在处理跨浏览器兼容性问题时。而attr()方法可能在旧版本的jQuery中有效，但在某些情况下可能无法正确反映元素的状态变化，特别是在动态操作时。 因此，回答中应该提到两种方法，但推荐使用prop()。需要比较两者的区别，并给出示例代码。比如，设置选中可以用.prop('checked', true)，取消选中则用.prop('checked', false)。而使用attr()的话，则是设置属性值为'checked'，或者移除该属性。 同时，用户的问题可能涉及到如何根据条件来设置复选框的状态，比如在对话框打开时根据某个值来设置。例如，在引用[2]中的例子，他们在对话框打开事件中检查某个隐藏值，然后设置复选框的checked属性。 总结，回答的结构应该是：首先介绍两种方法（attr和prop），解释它们的区别，推荐使用prop()，并提供示例代码。同时，可以提到在特定情况下（如动态创建的元素或表单处理）需要注意的地方，比如引用[3]中的处理方式可能需要在表单提交时处理隐藏的复选框，但用户的问题主要是设置checked状态，因此重点在prop和attr的使用。 最后，生成相关问题，比如如何获取复选框的状态，或者如何处理多个复选框，以及可能遇到的常见问题，比如为什么用attr有时不生效，这可以引导用户进一步了解prop和attr的区别。</think>要使用jQuery将复选框设置为选中状态，可以通过以下两种方法实现： ### 方法一：使用`prop()`方法（推荐） ```javascript // 设置选中状态 $('#checkboxID').prop('checked', true); // 取消选中状态 $('#checkboxID').prop('checked', false); ``` `prop()`方法直接操作DOM元素的属性，能准确反映复选框的实际状态，适用于所有jQuery版本（1.6+）[^1]。 ### 方法二：使用`attr()`方法 ```javascript // 设置选中状态 $('#checkboxID').attr('checked', 'checked'); // 取消选中状态 $('#checkboxID').removeAttr('checked'); ``` `attr()`方法修改HTML属性，但在动态交互中可能出现状态不同步的情况，适合静态页面操作[^2]。 ### 完整示例 ```html <input type="checkbox" id="agree"> <button onclick="$('#agree').prop('checked', true)">勾选协议</button> ``` ### 常见场景 1. **表单初始化时设置默认值** 在对话框打开事件中设置复选框： ```javascript $("#fModal").dialog({ open: function() { if(shouldCheck) { $(".row-form input[type='checkbox']").prop('checked', true); } } }); ``` 2. **动态表格操作** 处理表单提交时同步所有复选框状态： ```javascript $('#form').submit(function() { $('input[type="checkbox"]').each(function() { if(!$.contains(document, this) && this.checked) { $(this).clone().attr('type', 'hidden').appendTo(this.form); } }); }); ``` ### 注意事项 - 使用`prop()`时传递布尔值，而`attr()`需要字符串参数 - 对于动态生成的元素，需确保DOM加载完成后执行操作 - 批量操作建议使用类选择器，如`$('.check-group').prop('checked', true)`
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值