checkbox的选中和取消：attr() prop()

今天药忘吃喽~ 2022-06-01 13:18 425阅读 0赞

首先要明确，CheckBox是否被勾选中![SouthEast][]和input的checked这个attribute是否="checked"是没有直接关系的。

一个没有写相关js函数的input：checked，你只能控制它是否被选中，如上图所示。

$('.modal-body input:checked')

如上代码，这个jquery选择器能找到第二个input，但是能找到，与它的attitude：checked并没有关系。

如果想通过是否勾选来控制checked这个attitude，那么需要加如下代码：

$('.modal-body thead').on('click','input',function(){
    				if($(this).attr('checked')=='checked'){
    					$(this).removeAttr("checked");
    				}else{
    					$(this).attr("checked", "true");
    				}
    			});

如果你还想其他dom元素的事件来控制，是否选中和attitude，那么需要加如下代码：

$('.modal-body thead').on('change','select',function(){
    				
    				$(this).parent().find('th input').prop('checked','checked');
    				$(this).parent().find('th input').attr('checked','checked');
    			});

其中使用prop函数，是为了控制是否选中。如果没有使用，那么input元素不会被选中，但是attitude的值会变。

其实，实际上不用在意checked这个attitude，因为jquery选择器在意的是是否选中，而不是attitude的值。

但当需要用其他dom元素的事件来触发，使得CheckBox被选中时，就需要使用prop函数了。因为用户在意的是视觉，而不是通过控制台看attitude的值。

[SouthEast]: /images/20220601/75563a63907146e18f0e1b711175a9f5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，425人围观）

还没有评论，来说两句吧...

相关阅读

相关 attr和prop区别

*像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得...

今天药忘吃喽~/ 2024年04月18日 18:45/ 0 赞/ 176 阅读

相关 jQuery 实现选中和取消选中checkbox(复选框)的2种方法（attr()，prop()）

html代码： <input type='checkbox' id='checkbox1' /> 1 attr() 1.1 选中复选框 $(

偏执的太偏执、/ 2023年10月05日 11:50/ 0 赞/ 170 阅读

相关【Layui】------- checkbox 监听选中并取消其它选中

> <input type="checkbox" lay-skin="primary" class="checkboxs" lay-filter="checkboxs"

末蓝、/ 2023年07月01日 06:26/ 0 赞/ 145 阅读

相关 vue props和attrs

vue3 props 要先声明才能取值，attrs不用声明直接使用（$attrs 包含 class and style attribute） props 不包含事件，

小灰灰/ 2023年01月19日 12:54/ 0 赞/ 130 阅读

相关 attr()和prop()的区别

这篇文章主要介绍了jQuery获取attr()与prop()属性值的方法及区别介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下今天在项目中使用<select

矫情吗；*/ 2022年07月20日 12:30/ 0 赞/ 337 阅读

相关 prop 和 attr的区别

最近踩到一个坑，用`jQuery`的`$('.ipt').attr('checked', true);`来让checkbox变成checked状态，结果发现html上的值是改变

向右看齐/ 2022年07月12日 23:21/ 0 赞/ 306 阅读

相关 jquery的attr和prop

转载两篇文章 1、jquery实现checkbox的全选和全不选 [jquery checkbox 全选反选代码只能执行一遍，第二次就失败][jquery checkbox

ゝ一世哀愁。/ 2022年06月18日 10:46/ 0 赞/ 343 阅读

相关 checkbox选中后无法取消的问题

input标签页： <input type="checkbox" name=""> <input type="button" name="clickme" i

不念不忘少年蓝@/ 2022年06月17日 02:52/ 0 赞/ 641 阅读

相关 JQuery中checkbox勾选/取消勾选的诡异问题（attr和prop）

\1.使用attr()实现勾选的问题 //HTML伪代码 <form> 你爱好的运动是？<input type="checkbox" id="Che

约定不等于承诺〃/ 2022年06月14日 02:10/ 0 赞/ 415 阅读

相关 checkbox的选中和取消：attr() prop()

首先要明确，CheckBox是否被勾选中![SouthEast][]和input的checked这个attribute是否="checked"是没有直接关系的。一个没有写相

今天药忘吃喽~/ 2022年06月01日 13:18/ 0 赞/ 426 阅读