jquery系列之prop、attr以及对checkbox的操作

最新推荐文章于 2022-01-12 10:46:03 发布

慢慢充实自己

最新推荐文章于 2022-01-12 10:46:03 发布

阅读量421

点赞数

分类专栏：前端文章标签： jquery checkbox

本文链接：https://blog.csdn.net/u013289746/article/details/54292181

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

*又到年底了，以前老是感觉自己对技术掌握的不彻底以及自己的懒惰吧，开通博客都一年多了都没写一篇博客，最近项目上稳定的再改bug，
晚上就可以腾出手来写写博客了，首先就把今年在浏览器上所标记的书签以及自己的一些体会先总结一遍吧，省的过了一年又不知道各种东西是干嘛的了。
今天就先从第一个书签开始吧，jquery对于复选框的操作；
话不多说，先上代码：*

其实关于jquery操作复选框的代码网上有好多好多了，我也就不遍历性的全写了，把我自己的心得写一下：
首先是attr和porp的区别（它们在操作checkbox上的区别：）

1.attr(“checked”)为undefined和checked
$.prop(“checked”)为true和false
2. 对于复选框的操作代码中都有，可以自行查看
3. attr(“checked”,a);a为”checked”
prop(“checked”,b);//b可以为”checked”,”true”,true,false
大家仔细看看，多动手试一下就懂了

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框DEMO</title>
<script type="text/javascript" src="E:\jsPractice\bu动手一切为null\js\jquery-1.11.3.min.js"></script>
</head>
<body>
<div>
    <div><input class="mon" type="checkbox" value="财政"/><span>全选</span></div>
    <input class="monc mon1" type="checkbox" value="财政"/><span>财政</span>
    <input class="monc mon2" type="checkbox" value="财政"/><span>工商</span>
    <input class="monc mon3" type="checkbox" value="财政" checked/><span>税务</span>
    <input class="monc" type="checkbox" value="财政"/><span>海关</span>
    <div><a href="http://www.baidu.com" target="_self" class="btn" action="xixi">百度</a></div>
</div>
<script type="text/javascript">
$(function(){
    var val1 = $(".mon1").attr("checked");//undefined和checked
    var val2 = $(".mon1").prop("checked");//true和false
    console.log(val1+","+val2);

    //全选和取消
    $(".mon").change(function(){ 
        var is_checked = $(this).prop("checked"); 
        $('.monc').prop("checked",this.checked); //this.checked或is_checked
    }); 

    $(".mon2").attr("checked","checked");//可以为"checked"
    $(".mon2").prop("checked","checked");//可以为"checked","true",true,false
    $(".mon3").prop("checked","true");
    $(".mon3").prop("checked",false);

    //遍历checkbox
    $('input:checkbox').each(function () {
    //write
        var vval = $(this).prop("checked");
    });

    alert($("a").attr("target"));
    console.log($("a").prop("action"));//undefined


});
</script>
</body>

</html>

扩展（最好，当然不是绝对的）：

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
例如：百度

href、target、class都为固有属性，而action为自定义的dom属性
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

//1至于选取一个或者其中一部分进行选中或删除涉及到jquery的选择器内容，在下次博客中介绍
//2下拉框