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

今天药忘吃喽~ 2022-06-01 13:18 165阅读 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 条评论，165人围观）

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

相关阅读

相关 attr和prop区别

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

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

相关 checkbox选中和取消，控制dom元素颜色变化

<!DOCTYPE HTML> <html> <head> <title></title> <m

缺乏、安全感/ 2022年10月16日 01:49/ 0 赞/ 108 阅读

相关 checkbox选中和取消，控制dom元素颜色变化

<!DOCTYPE HTML> <html> <head> <title></title> <meta name="viewp

不念不忘少年蓝@/ 2022年10月10日 12:44/ 0 赞/ 117 阅读

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

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

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

相关 jquery系列之prop、attr以及对checkbox的操作

又到年底了，以前老是感觉自己对技术掌握的不彻底以及自己的懒惰吧，开通博客都一年多了都没写一篇博客，最近项目上稳定的再改bug，晚上就可以腾出手来写写博客了，首

雨点打透心脏的1/2处/ 2022年07月13日 12:29/ 0 赞/ 128 阅读

相关 prop 和 attr的区别

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

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

相关 jquery的attr和prop

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

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

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

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

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

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

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

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

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

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

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