2. jQuery 的属性操作
- attr() 可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等等
此外，attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj - prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等等
2.1 attr、prop案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-31</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
alert( $(":checkbox:first").attr("name") ); // 获取第一个checkbox的name属性的值
$(":checkbox:first").attr("name","checkbox3") ; // 设置第一个checkbox的name属性的值
alert( $(":checkbox:first").attr("name") ); //再次获取，检测是否设置成功
attr属性测试 checked属性
alert( $(":checkbox:eq(0)").attr("checked")); //返回第一个checkbox的checked属性的值：checked
alert( $(":checkbox").eq(1).attr("checked")); //返回第二个checkbox的checked属性的值：undefined
alert( $(":checkbox").eq(2).attr("checked")); //输出checked
prop属性测试 checked属性
alert($(":checkbox:eq(0)").prop("checked")); //输出true
alert($(":checkbox:eq(1)").prop("checked")); //输出false
alert($(":checkbox:last").prop("checked")); //输出true
});
</script>
</head>
<body>
<input name="checkbox1" type="checkbox" checked="checked" value="checkbox1" />checkbox1
<input name="checkbox2" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox4" type="checkbox" checked="" value="checkbox4" />checkbox4
</body>
</html>
对于checked属性，只要写了checked=""，存在这样的属性定义，里面不用赋值或者随便赋值checked=""(空串)、checked=“abc”、checked=“checked”,都认为是checked=“checked”。
当获取checked、selected、disabled等属性，我们只关心它们是否被选中（true、false），而不关系它们具体的值，因此获取这种属性的值时，推荐用prop方法。
$(":checkbox:first").attr("name","checkbox3") ; 可以用attr方法设置第一个checkbox的name属性的值
那么怎么设置第一个checkbox的checked属性，使其被选中或者取消选中呢？
$(":checkbox:first").prop("checked",false ); //取消选中
$(":checkbox:eq(1)").prop("checked",true ); //被选中，true、false 不加引号
其中第二条被选中可以用val方法替代：
$(":checkbox").val(["checkbox2"]);
此时是把这三个checkbox看成一组选项，val[ ’ ’ ] 里面填的是欲选中的该组的其中的checkbox的属性值即可选中。
注意，这种方法只能获取是否被选中，使之初始化时选中，不能取消选中。
个人感觉：这两种方法：val更偏向于初始化时操作，prop使用会更多。
辨析：
- text 和 html方法是获取和设置标签之间省略号部分的内容 < span >……< /span >
- val方法是获取和设置ipnut便签的内容：当input为text password时，和text方法差不多；
当为radio单选框 、checkbox多选框、 select下拉列表时，可以判断是否选中和没有选中，和prop方法差不多。 - attr方法是可以获得标签的属性的取值 < span ……> < /span>
此外，attr方法还支持自定义自己的标签属性给一个标签属性：
假设 定义给上面的checkbox1定义一个名叫DIYlable的属性，给该属性赋值为"my label"。
<script tyep="text/javascript">
$(function () {
$(":checkbox:first").attr("DIYlabel","my label");
alert($(":checkbox").first().attr("DIYlabel"));
});
</script>
2.2 应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-31</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
实现功能的代码
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
界面如图所示：
要求实现：
- 全选、全不选、反选 按钮基本功能
- 全选/全不选 多选框：当选中时，下面多选框也全选中；当从选中变为未选中时，下面多选框也全不选中。(主动)
- 一个个的选，当满足全选的时候，全选/全部选标签 也被选中，其他情况下，全不选或者没选完时都不会打上。(被动)
- 【提交】按钮，对选中的球进行输出
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
1. 给 全选按钮 绑定单击事件,除button按钮外，都选中 (因为这里只有button和checkbox)
$("#checkedAllBtn").click(function () {
$(":checkbox").prop("checked", true);
}); //同时，全选/全不选 也被选中
2. 给 全不选按钮 绑定单击事件
$("#checkedNoBtn").click(function () {
$(":checkbox").prop("checked", false);
}); //全选/全不选 不被选中
3. 给 反选按钮 绑定单击事件
$("#checkedRevBtn").click(function () {
$(":checkbox").each(function () {
this.checked=!this.checked;
});// 在each遍历的function函数中，有一个this对象。这个this对象是当前正在遍历到的dom对象
//但是注意两个的极端情况，当本身全选时，反选就是全不选；当本身全不选时，反选就是全选
//当反选是全选时，需要给选/全不选 input标签 也给选上；当反选是全不选时，无影响，不考虑；
var allCnt=$(":checkbox[name='items']").length;
// 获取全部的球类个数，是个定值, 当[name！='items']时，需要先判断name属性是否存在，等于时不用
var checkedCnt=$(":checkbox[name='items']:checked").length;
// 再获取 选中 的球类个数
$("#checkedAllBox").prop("checked",allCnt==checkedCnt);
//判断全选/全不选 input标签 是否选中，当选中的球类个数等于全部的时候，代表该是全选了，为true
});
4. 给 全选/全不选 多选框 绑定点击事件
$("#checkedAllBox").click(function () {
// alert(this.checked);
//经测试得知，在该函数中的this对象，是点击多选框之后的this对象，即先点击多选框，再判断this.checked
//所以，当点击完选中后，同时会输出true；不选中点击后，会输出false，利用这一特性，不用再if判断了
$(":checkbox[name='items']").prop("checked",this.checked);
}); //给所有name='items'的多选框修改属性值
4plus. 4存在一个问题，当一个个选，当全选时，也会触发全选/全不选 多选框，此时再取消一个，也要判断是不是取消全选/全不选
// 给每个球的多选框都绑定单击事件
$(":checkbox[name='items']").click(function () {
//每选中一个球，都要判断是不是最后一个
var allCnt=$(":checkbox[name='items']").length;
var checkedCnt=$(":checkbox[name='items']:checked").length;
$("#checkedAllBox").prop("checked",allCnt==checkedCnt);
});
5.【提交】按钮单击事件，对选中的球进行输出
$("#sendBtn").click(function () {
$(":checkbox[name='items']:checked").each(function () {
alert(this.value);
});
});
});
</script>