<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <title>Document</title> <script type="text/javascript"> $(function(){ $(‘#all‘).on(‘click‘,function(){ $(‘input:lt(4)‘).prop(‘checked‘,true); //lt，gt是不包括临界的， }); $(‘input:eq(5)‘).on(‘click‘,function(){ $(‘input:lt(4)‘).prop(‘checked‘,false); }); $(‘#btn‘).click(function(){ var $att=$(‘input:checkbox‘).prop(‘checked‘); // var $att=$(‘input:checkbox‘).attr(‘checked‘ 总是弹出undefined // alert($att); if($att==false){ // $(‘input[checked=true]‘).attr(‘checked‘,false); $(‘input:checkbox‘).prop(‘checked‘,true); } else{ $(‘input:checkbox‘).prop(‘checked‘,false); } // $(‘[name=hobby]:checkbox‘).each(function(){ // this.checked=!this.checked; // //赋相反的值。 // }) }); }); </script> </head> <body> <form action=""> <label for=‘hobby‘>你爱好的运动是</label><br> <input type="checkbox" name="hobby" >足球 <input type="checkbox" name="hobby" >篮球 <input type="checkbox" name="hobby" >羽毛球 <input type="checkbox" name="hobby" >乒乓球<br> <input type="button" value="全选" id=‘all‘> <input type="button" value="全不选"> <input type="button" value="反选" id=‘btn‘> <!-- <input type="button" value="提交"> --> </form> </body> </html> <!-- 问题关键是attr获取不到checked的属性值，总是弹出undefined ，后来发现要用prop来获取值 前面的全选和反选用attr来设置checked值时候只能够设置一次， 二用prop可以设置多次 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<title>Document</title>
<script type="text/javascript">
$(function(){
$(‘#all‘).on(‘click‘,function(){
$(‘input:lt(4)‘).prop(‘checked‘,true);
//lt，gt是不包括临界的，
});
$(‘input:eq(5)‘).on(‘click‘,function(){
$(‘input:lt(4)‘).prop(‘checked‘,false);
});
$(‘#btn‘).click(function(){
var $att=$(‘input:checkbox‘).prop(‘checked‘);
// var $att=$(‘input:checkbox‘).attr(‘checked‘ 总是弹出undefined
// alert($att);
if($att==false){
// $(‘input[checked=true]‘).attr(‘checked‘,false);
$(‘input:checkbox‘).prop(‘checked‘,true);
}
else{
$(‘input:checkbox‘).prop(‘checked‘,false);
}
// $(‘[name=hobby]:checkbox‘).each(function(){
// this.checked=!this.checked;
// //赋相反的值。
// })
});
});
</script>
</head>
<body>
<form action="">
<label for=‘hobby‘>你爱好的运动是</label><br>
<input type="checkbox" name="hobby" >足球
<input type="checkbox" name="hobby" >篮球
<input type="checkbox" name="hobby" >羽毛球
<input type="checkbox" name="hobby" >乒乓球<br>
<input type="button" value="全选" id=‘all‘>
<input type="button" value="全不选">
<input type="button" value="反选" id=‘btn‘>
<!-- <input type="button" value="提交"> -->
</form>
</body>
</html>
<!-- 问题关键是attr获取不到checked的属性值，总是弹出undefined ，后来发现要用prop来获取值
前面的全选和反选用attr来设置checked值时候只能够设置一次， 二用prop可以设置多次
-->1.通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase
复制代码 代码如下:
<input type="checkbox" id="selectAll" onclick="checkAll()">全选
function checkAll()
{
var checkedOfAll=$("#selectAll").prop("checked");
alert(checkedOfAll);
$("input[name=‘procheck‘]").prop("checked", checkedOfAll);
}
2.如果使用attr方法获取时，如果当前input中初始化未定义checked属性，则不管当前是否选中，$("#selectAll").attr("checked")都会返回undefined；
复制代码 代码如下:
<input type="checkbox" id="selectAll" onclick="checkAll()" >全选
如果当前input中初始化已定义checked属性，则不管是否选中，$("#selectAll").attr("checked")都会返回checked.
复制代码 代码如下:
<input type="checkbox" id="selectAll" onclick="checkAll()" checked>全选
function checkAll()
{
var checkedOfAll=$("#selectAll").attr("checked");
alert(checkedOfAll);
$("input[name=‘procheck‘]").attr("checked", checkedOfAll);
}
总结，如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr.
时间： 2024-10-24 15:28:57