checkbox 选中_jq中attr 设置checkbox 选中状态中的坑

最新推荐文章于 2022-12-11 12:48:13 发布

最新推荐文章于 2022-12-11 12:48:13 发布 · 176 阅读

文章标签：

#checkbox 选中 #checkbox选中 #checkbox选中和不选中 #input 长度设置 #input中checkbox选中 #input设置长度

本文介绍了在使用jQuery时，如何正确区分和使用prop与attr方法。特别是在处理复选框、单选按钮等元素的checked、selected及disabled状态时，使用prop方法能更准确地反映DOM元素的实际状态。

attr('checked', true)设置状态只有第一次有用，再次点击就无效果。类似的属性还有selected 和 disabled。当遇到这种情况的时候，把attr换成prop方法，prop和attr一样使用，以下有例子；

全选的小例子：

$(function(){   $("#j_cbAll").click(function(){     $("#j_tb input").prop("checked",$(this).prop("checked")) //根据全选按钮的状态，设置下属按钮的状态。   })    $("#j_tb input").click(function(){  //当点击下属产品时，全选按钮发生改变，此处用下属产品input的长度来判断是否为选中状态      var inputLen=$("#j_tb input").length;      var inputCheckLen=$("#j_tb input:checked").length;     if(inputLen==inputCheckLen){       $("#j_cbAll").prop("checked",true)     }else{       $("#j_cbAll").prop("checked",false)     }   }) })

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39832829

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

jquery无法设置checkbox选中即没有变成选中状态

12-10

代码如下: $(“input”).attr(“checked”,”checked”) 设置以后checkbox并没有变成选中状态，用chrome调试看了一下，checkbox中确实有checked属性，而且，值为checked，但是页面显示仍然为未选中状态代码如下: $...

Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)

12-04

在 jQuery 中，我们可以使用 `.attr()` 方法来改变它们的 `checked` 属性，从而改变其选中状态。以下是一个例子： ```javascript // 如果之前有选中的 radio，则取消选中 $("#tj_cat .pro_category").each(function...

参与评论您还未登录，请先登录后发表或查看评论

jQuery的attr方法处理checkbox的问题

aifeier1982的博客

09-06

165

现象使用了 jQuery 1.10 的版本，想实现 checkbox 的全部选中和全部取消选中，使用了 attr 的方法，如下： $(elem).attr(“checked”) 测试过程中发现，第一次从未选中状态变为选中，再从选中变为未选中，是可以的。但是第二次界面上就没有任何变化了，但是查看元素，发现 checked 属性实际上已经改变了。这是什么情况呢？原因看一下官方对这个函...

checkbox的attr("checked")一直为undefined问题解决方案

卡布洛技术专栏

06-13

1444

最近本屌丝应项目开发需求，需要做个一个全选的checkbox功能。哎呀吗~~这不是很简单的事情么，一个总的checkbox，N多个子checkbox，总的checkbox一旦选中，子checkbox全部选中，总的一旦不选中，子的也都不选中。拿到这个小需求，本屌丝一阵窃喜，多么简单的功能啊，OK，两分钟完事~~~ 时间一分一秒的过去，本屌丝内心奔腾的草原的马儿，从一直逐渐增加到了千万只~~

jQuery获取和设置checkbox的checked属性

gcy_rose的博客

01-20

669

在jquery里，有两种操作元素属性的方法，一种是attr()，另一种是prop()。 attr()的属性在页面首次加载时就确定。当页面初始状态checkbox没有选中，(&amp;amp;amp;quot;.breedinput&amp;amp;amp;quot;).attr(&amp;amp;amp;quot;checked&amp;amp;amp;quot;)为undefined，点击选中后，还是undefined，不管选中与否((&a

jquery 设置checkbox的checked属性相关

bsr1983的专栏

03-28

413

所使用的jquery版本为jquery-1.9.1，浏览器为Chrome 1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase 全选 function checkAll() { var checkedOfAll=$("#selectAll").prop("checked"); alert(checkedOfAl...

jquery 使用attr方法对checkBox进行全选和反选操作

西洲

06-20

981

function checkBoxAll(){ $(".checkboxChoose").bind("click",function(){ var _this=$(this),flag=_this.hasClass("checkAll"); var checkbox=$("[name=bookChoose]:checkbox");//得到所有的checkbox。 if(flag

浅谈jquery设置和获得checkbox选中的问题

01-19

1. 设置checkbox选中： //选中多选框 checkbox=$(#agentinfo input[name='veri[]']); //循环多选框中的值 checkbox.each(function(){ for(var j=0;j<data.veri.length;j++){ //判断当前值是否在数组中 if($...

Jquery遍历checkbox获取选中项value值的方法

10-26

在本篇内容中，我们将详细探讨如何使用JQuery来遍历checkbox元素，并获取所有被选中项的value值。首先，我们需要理解checkbox元素在HTML中的基础结构，通常一个复选框由一个标签表示，其中type属性被设置为...

jquery判断checkbox是否选中及改变checkbox状态的实现方法

01-19

.attr(‘checked): //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop(‘checked’): //16+:true/false .is(‘:checked’): //所有版本:true/false//别忘记冒号哦 jquery赋值checked的几...

使用 jQuery 为复选框设置“选中”

HuntsBot的博客

12-11

1万+

我想做这样的事情来使用 jQuery 勾选 checkbox：或者这样的事情存在吗？

jquery利用attr()方法改变checkbox控件状态的问题

林中路

09-02

3906

使用jquery进行购物车里的商品全选和全不选操作时，需要改变所有checkbox的状态，原来的写法是：$(".selectall").on("click",function(){ if($(this).html()=="x"){ $("[name = chkItem]:checkbox").attr("checked", true);

jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

热门推荐

有范管理美学 | 公众号/头条号：有范管理美学

08-21

13万+

jQuery操作复选框checkbox技巧总结 --- 设置选中、取消选中、获取被选中的值、判断是否选中等一、checked属性定义先了解下input标签的checked属性： 1、HTML <input> checked 属性 ◆定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> ...

jQuery attr() 操作checkbox 选中或者不选中

weixin_30243533的博客

12-31

315

使用 jQuery attr() 操作checkbox 选中或者不选中时，我们应该注意： 1.尽量不要使用attr()来设置checkbox是选中或者不选中状态； 2.可以使用dom.checked=true; 来设置dom对象选中或者不选中；例子： html: 1 <input id="a" type="checkbox" /> 2 <input id="b"...

关于Checkbox与attr

weixin_30399797的博客

09-29

125

$("input[name='checkbox']").attr("checked","checked");调试时，前两次都没有问题，可以正常显示选中和取消，但当再去选中的时候，复选框的属性checkbox值变为"checked"，没问题，但是复选框却不在显示选中状态，明明属性值改了，但是却不显示勾选，太诡异了。代码修改了却得不到正确的显示状态，纠结了很久，找不到原因。于是乎各种找原因，...

jq设置checked是否选中_jQuery: 判断checkbox复选框是否被选中

weixin_39900608的博客

12-22

602

本文介绍如何用jQuery获取checkbox复选框选中状态，或验证是否选中或取消选中复选框。jQuery: 判断checkbox复选框是否被选中这里我们使用jQuery .is()方法和匹配的checked属性。描述：方法.is()针对选择器、元素或jQuery对象检查当前匹配的元素集，如果这些元素中的至少一个与给定的参数匹配，则返回true。下面是实例分析。引用jQuery库文件在HTML代码...

checkbox复选框 attr属性只会勾选一次的问题

欢迎来到【战羽】的博客

04-24

522

<input type="checkbox" id="boxSelected" /> 对于该控件，获取复选框的勾选属性时，需要用 $("#boxSelected").prop("checked",true)，该方法可以重复勾选若是用$("#boxSelected").attr("checked",true)方法，则只会勾选一次...

jquery使用attr()方法对checkbox设置checked属性为true时，勾选框没反应的问题以及解决办法

u013347796的博客

03-10

5713

问题情景：商品的全选和部分选中，单个商品取消勾选后再选中，想通过attr(“checked”,true)使checkbox勾选，但是页面上没反应。首先打开页面初始化是全选中的，此时全选的checked属性为checked。这是对一个商品取消选中，然后再次选中的情况，此时通过attr()方法设置checked为true，但是页面上没反应。解决办法通过百度查找attr()和prop()的...

jquery的attr和removeAttr实现checkbox全选和取消全选问题

4396的博客

01-12

2167

jquery的attr和removeAttr实现checkbox全选和取消全选问题问题说明：一个全选和取消全选的功能，界面效果图如下点击全选checkbox则所有checkbox被选中或者取消选中用到Jquery的attr(“checked”,true)和removeAttr(“checked”)方法这个时候出现了问题，在第一次选中和取消时成功第三次点击时则不能实现全

html的checkbox设置不能修改

最新发布

03-20

### 设置 HTML 中 Checkbox 不可修改的方法在 HTML 中，`<input>` 元素的 `type="checkbox"` 可通过设置其 `disabled` 属性来实现不可修改的状态。当该属性被应用到 `<input type="checkbox">` 上时，用户将无法更改复选框的选择状态。以下是具体说明： #### 1. 基本语法要让一个复选框不可用，只需在其标签中添加 `disabled` 属性即可[^1]。例如： ```html <input type="checkbox" id="myCheckbox" disabled> <label for="myCheckbox">此选项不可选</label> ``` 上述代码中的 `disabled` 属性会阻止用户交互，并使复选框呈现灰色视觉效果[^3]。 #### 2. 动态控制 Disabled 状态 (JavaScript 实现) 如果需要动态启用或禁用复选框，则可以借助 JavaScript 来完成这一功能。下面是一个简单的示例： ```javascript function toggleCheckboxState() { const checkbox = document.getElementById("dynamicCheckbox"); checkbox.disabled = !checkbox.disabled; } ``` 对应的 HTML 结构如下： ```html <input type="checkbox" id="dynamicCheckbox"> <button onclick="toggleCheckboxState()">切换可用/不可用状态</button> ``` 这段脚本允许用户通过点击按钮来回切换复选框的可用性和不可用性。 #### 3. 使用 jQuery 控制 Disabled 属性对于熟悉 jQuery 的开发者来说，也可以利用库的功能简化操作过程。比如，使用 `.prop()` 方法能够方便地管理元素的布尔型特性（如 `checked`, `selected`, 或者这里的 `disabled`）。实例展示如下： ```javascript $("#enableDisableButton").click(function(){ $("#jqCheckbox").prop('disabled', false); }); $("#disableEnableButton").click(function(){ $("#jqCheckbox").prop('disabled', true); }); ``` 配合相应的 HTML 配置： ```html <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  <input type="checkbox" id="jqCheckbox" /> <button id="enableDisableButton">启用</button> <button id="disableEnableButton">禁用</button> ``` 这里需要注意的是，虽然可以用 `.attr()` 方法处理某些情况下的 `disabled` 特性设定[^2]，但在现代浏览器环境下推荐优先采用 `.prop()` 方式以获得更一致的行为表现。 #### 4. 自定义样式调整默认情况下，浏览器会对带有 `disabled` 属性的控件自动施加特定外观变化；然而开发人员有时希望进一步自定义这些样式的显示形式。此时可通过 CSS 定义专属规则达成目标。举个例子： ```css /* 调整已停用复选框的颜色 */ input[type=checkbox]:disabled + label{ color: graytext; } /* 改变背景色调 */ input[type=checkbox][disabled]{ background-color: lightgray; } ``` 以上片段展示了如何改变关联文字以及实际输入域本身的色彩配置[^4]。 ---