注意:对于input获取属性不能用attr(),只能用prop()。不然出现undefined。

第一版:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、全不选、反选</title>
</head>
<body>
<label><input type="checkbox" name="" id="">衣服</label>
<label><input type="checkbox" name="" id="">鞋子</label>
<label><input type="checkbox" name="" id="">裤子</label>
<label><input type="checkbox" name="" id="">内衣</label>
<input id="btn1" type="button" value="全选">
<input id="btn2" type="button" value="反选">
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$('#btn1').click(function(event) {
        //先保存这些checkbox的这个属性的值,取反。
var check = $(":checkbox").prop('checked');
$(":checkbox").prop('checked',!check);
}); $('#btn2').click(function(event) {
$(":checkbox").each(function(index) {
        //遍历每一个checkbox,针对当前的这个取反。
var check = $(this).prop('checked');
$(this).prop('checked',!check);
});
});
</script>
</body>
</html>

第二版:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选、全不选、反选</title>
</head>
<body>
<label><input type="checkbox" name="" id="">衣服</label>
<label><input type="checkbox" name="" id="">鞋子</label>
<label><input type="checkbox" name="" id="">裤子</label>
<label><input type="checkbox" name="" id="">内衣</label>
<input id="btn1" type="button" value="全选">
<input id="btn2" type="button" value="反选">
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$('#btn1').click(function(event) {
if($(":checkbox").prop('checked')){
$(":checkbox").prop('checked',false);
$(this).attr('value','全选');
}else{
$(":checkbox").prop('checked',true);
$(this).attr('value','全不选');
}
}); $('#btn2').click(function(event) {
$(":checkbox").each(function(index) {
var check = $(this).prop('checked');
console.log(check);
$(this).prop('checked',!check);
});
});
</script>
</body>
</html>

在高版本的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"

jqeury实现全选和反选的更多相关文章

  1. checkbox的全选与反选

    最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...

  2. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  3. 夺命雷公狗-----React---28--小案例之react经典案例todos(全选和反选)完

    这个功能实现的步骤如下所示: 最终实现全选和反选,代码如下所示: <!DOCTYPE html> <html lang="en"> <head> ...

  4. PHP基础班初学心得:用JQ实现表单的全选、反选、取消和删除功能

    摘要: 本人刚参加PHP基础班培训,由于之前毫无基础,分享的心得可能不规范,方法也许也"旁门左道",不能保证质量,只作自己总结学习,也希望能帮助到同样是初学者的朋友们,共同进步. ...

  5. ichecked 全选、反选

    //iChecked复选框的全选.反选var checkBox =function (checkParents){ $(checkParents).find('.minimalCheckBox1'). ...

  6. checkbox全选,反选,取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  7. 【jquery】一个简单的单选、多选、全选、反选、删除的小功能

    对表格内容进行单行删除.单行选中.多行选中.全选.反选.删除选中行等操作 HTML代码 <table class="table table-bordered border-shadow ...

  8. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

  9. jquery一个按钮全选和反选

    1.jquery实现复选框全选和反选的方式有好几种,今天遇到一个问题,只用下边的方式生效:function checkAll(){ var check=$('#check_all').is(':che ...

随机推荐

  1. ActiveMQ 了解

    Active MQ 是JMS的一个具体实现,所以首先要对JMS有所了解. 1.       JMS: 定义:Java消息服务(Java Message Service),是Sun是提出来的为J2EE提 ...

  2. Contiki Etimer 模块

    一.Etimer概述 Etimer提供产生时间事件(timed event)的机制,当设定好的timer到期时,将会给设定etimer的process发送一个PROCESS_EVENT_TIMER 事 ...

  3. Win7、Win8、Win10始终以管理员身份运行程序。

    在Win7.Win8.Win10系统中,以管理员身份运行程序很麻烦,一般有以下几种方式: 1.在可执行程序或快捷方式上右键,以管理员身份运行: 2.在可执行程序或快捷方式上右键->属性-> ...

  4. Ajax动态切换按钮

    function changeAjax(str, obj) { var idx = $(obj).parent().parent().index(); if(confirm('确定执行操作么?')) ...

  5. leetcode 104 Maximum Depth of Binary Tree(DFS)

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  6. CF Round #460

    晚上去看月亮了 离比赛结束半个小时才滚回来A了T1T2T3... 又要掉Rating辣 T4 给一个有向图 每条边有一个英文字母作为边权 求一条路径 该路径上权值众数出现次数最多 求最多的出现次数 拓 ...

  7. 「NOIP2017」「LuoguP3959」 宝藏(爆搜

    题目描述 参与考古挖掘的小明得到了一份藏宝图,藏宝图上标出了 nn 个深埋在地下的宝藏屋, 也给出了这 nn 个宝藏屋之间可供开发的mm 条道路和它们的长度. 小明决心亲自前往挖掘所有宝藏屋中的宝藏. ...

  8. 【Lintcode】159.Find Minimum in Rotated Sorted Array

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...

  9. [转]BFC 神奇背后的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  10. poj 1269 Intersecting Lines——叉积求直线交点坐标

    题目:http://poj.org/problem?id=1269 相关知识: 叉积求面积:https://www.cnblogs.com/xiexinxinlove/p/3708147.html什么 ...