jquery的attr获取表单checked 布尔值问题

Posted 2020-09-05 一米阳光!

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery的attr获取表单checked 布尔值问题相关的知识，希望对你有一定的参考价值。



<!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.

以上是关于jquery的attr获取表单checked 布尔值问题的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 自学笔记

jquery attr方法和prop方法获取input的checked属性问题

prop与attr的区别

在jquery中应该使用prop方法来获取和设置checked属性，不应该使用attr。