checkbox选中取消选中、二次选中无效以及浏览器兼容性问题问题总结

最新推荐文章于 2024-05-21 21:57:08 发布

huzhigenlaohu

最新推荐文章于 2024-05-21 21:57:08 发布

阅读量4.4k

点赞数 2

分类专栏： javascript 文章标签： checkbox javascript

本文链接：https://blog.csdn.net/huzhigenlaohu/article/details/49796865

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">看到网络答案都是复制粘贴的，我也是醉了，想问下你们，真的亲自试过么？成功过么？</span>

传统选中取消代码如下：

 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title></title>
 	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
 </head>
 <body>
 	<input type="checkbox" name="checkbox" id="checkbox" >
 	<input type="button" οnclick="btn_submit();" name="" id="btn_submit" value="选中">
 	<input type="button" οnclick="btn_cancel();" id="btn_cancel" value="取消选中">
 </body>
 	<script>
 		var btn_cancel = function(){
 			<span style="color:#ff0000;">$("#checkbox").attr('checked',false);</span>
 		};
 		var btn_submit = function(){
 			<span style="color:#ff0000;">$("#checkbox").attr('checked',true);</span>
 		};
 	</script>
 </html>

醉了，这样写，确实可以迷惑人了，全选或者再次选中再次取消都是无效的，大哥们

还有就是一些人建议的

$("#checkbox").attr('checked','checked');

</pre><pre name="code" class="html">

告诉你们这些复制党，这还是不行的，问题多多的，不管是兼容性还是二次选中问题

</pre><pre name="code" class="html">

下面就来一段正确的写法：

 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<title></title>
 	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
 </head>
 <body>
 	<input type="checkbox" name="checkbox" id="checkbox" >
 	<input type="button" οnclick="btn_submit();" name="" id="btn_submit" value="选中">
 	<input type="button" οnclick="btn_cancel();" id="btn_cancel" value="取消选中">
 </body>
 	<script>
 		var btn_cancel = function(){
 			$("#checkbox").prop('checked',false);
 		};
 		var btn_submit = function(){
 			$("#checkbox").prop('checked',true);
 		};
 	</script>
 </html>

为什么这样可以呢？

prop()函数,原来是jquery的重大更新，她早就发现了这个bug

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。

关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
• 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

上面的描述也许有点模糊，举几个例子就知道了。

复制代码代码如下:

这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。

复制代码代码如下:

这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。

再举一个例子：

复制代码代码如下:

 
 <input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见

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

复制代码代码如下:

$("#chk1").prop("checked") == false $("#chk2").prop("checked") == true

如果上面使用attr方法，则会出现：

复制代码代码如下:

 
 $("#chk1").attr("checked") == undefined 
 
 $("#chk2").attr("checked") == "checked"

还有一篇文章，可以看看，写的很好： prop attr区别

huzhigenlaohu

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
checkbox选中取消选中、二次选中无效以及浏览器兼容性问题问题总结

var btn_cancel = function(){ $("#checkbox").prop('checked',false); }; var btn_submit = function(){ $("#checkbox").prop('checked',true); }; 看到网络答案都是复制粘贴的，我也是醉了，想问下你们，真的亲自试过么？成功过么
复制链接

扫一扫