checkbox选中取消选中二次选中无效以及浏览器兼容性问题问题总结
Posted huzhigenlaohu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox选中取消选中二次选中无效以及浏览器兼容性问题问题总结相关的知识，希望对你有一定的参考价值。
<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 href="http://www.baidu.com" target="_self" class="btn">百度</a>
这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
复制代码代码如下:
<a href="#" id="link1" action="delete">删除</a>
这个例子里<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区别
以上是关于checkbox选中取消选中二次选中无效以及浏览器兼容性问题问题总结的主要内容，如果未能解决你的问题，请参考以下文章
JSP中，有三个checkbox，怎么做到 1，选中第一个，后面两个自动选中。 取消第