方法：
1、attr()
attr();可以写两个参数:1参数；属性,2属性值
attr();只写了一个参数,获取该元素的这个属性的值2、prop()
prop();可以写两个参数:1参数；属性,2属性值
prop();只写了一个参数,获取该元素的这个属性的值
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
<body>
<input type="button" name="" value="点击显示" id="btn">
<input type="checkbox" name="" value='male' id="sex">男
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
// 需求：点击按钮输出复选框的选中状态
// 页面加载事件
$(function () {
// 注册按钮事件
$('#btn').click(function () {
// -----------------使用attr()---------------
// console.log($('#sex').attr('checked')); //输出undefined
// 如果我们给a标签设置了checked:checked,那么无论有没有选中，返回的都是checked
// 所以通过attr()我们根本不能真正获取元素的选中状态
// ------------------prop()----------------
//prop()可以真正的获取元素是否选中的状态
/*
console.log($('#sex').prop('checked')); //输出false
$('#sex').prop('checked', true); //设置checked属性是否选中
console.log($('#sex').prop('checked')); //输出true
*/
//小练习：点击按钮让复选框选中,再点按钮让复选框不选中
var isChecked = $('#sex').prop('checked');
if(isChecked) {
$('#sex').prop('checked', false);
}else {
$('#sex').prop('checked', true);
}
});
});
</script>
</body>
小练习(全选和反选案例)
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>课程名称</th>
<th>所属学院</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>JavaScript</td>
<td>前端与移动开发学院</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>css</td>
<td>前端与移动开发学院</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
//需求： 全选和反选
// 页面加载事件
$(function () {
// 当点击th中的复选框时，设置body中的复选框都选中
// 注册th中复选框的点击事件
$('#j_cbAll').click(function () {
var status = $(this).prop('checked'); //记录状态
$('#j_tb :checkbox').prop('checked', status);
});
//当body中的复选框全选时，th中的也选中，有一个不选中时，th则不选中
// 找到body中的复选框，添加点击事件
$('#j_tb :checkbox').click(function () {
思路：如果 body中的复选框的个数 和 选中的的复选框的个数 相等，则表示复选框都被选中了，否则反
var checkboxLength = $('#j_tb :checkbox').length;
var checkedLength = $('#j_tb :checked').length;
if(checkboxLength === checkedLength) {
$('#j_cbAll').prop('checked', true);
}else {
$('#j_cbAll').prop('checked', false);
}
});
});
</script>
</body>
网友评论