JQuery应用实例学习 —— 20 jquery对象的遍历实现反选效果

最新推荐文章于 2022-03-22 10:55:30 发布

烟敛寒林o

最新推荐文章于 2022-03-22 10:55:30 发布

阅读量148

点赞数

分类专栏： # ——【 JQuery】

本文链接：https://blog.csdn.net/dyw_666666/article/details/82714669

版权

——【 JQuery】专栏收录该内容

29 篇文章 0 订阅

订阅专栏

jquery对象的遍历实现反选效果

分别用面向过程思路、面向函数式思路回调函数实现反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>jquery对象的遍历实现反选效果</h1>
    <input type="button" value="反选" onclick="fan();">
    <p><input type="checkbox" name="" id=""></p>
    <p><input type="checkbox" name="" id=""></p>
    <p><input type="checkbox" name="" id=""></p>
    <p><input type="checkbox" name="" id=""></p>
    <p><input type="checkbox" name="" id=""></p>
    <p><input type="checkbox" name="" id=""></p>
    <p><input type="checkbox" name="" id=""></p>
</body>
<script src="jquery.js"></script>
<script>
/*
// 面向过程的思路
function fan() {
    var cbs = $('input:checkbox');
    for(var i=0; i<cbs.length; i++) {
        if($(cbs[i]).prop('checked')) {
            $(cbs[i]).prop('checked' , false);
        } else {
            $(cbs[i]).prop('checked' , true);
        }
    }
}*/


// 面向函数式思路,回调函数
// 在回调函数中, this是谁? 
// 在循环过程中, 循环到哪个DOM对象, 回调函数中的this就指向哪个DOM对象
/*function fan() {
    $('input:checkbox').each(function(){
        //console.log(this);
        if($(this).prop('checked')) {
            $(this).prop('checked' , false);
        } else {
            $(this).prop('checked' , true);
        }
    });
}*/


function fan() {
    $('input:checkbox').each(function(){
        //console.log(this); //this是DOM对象
        this.checked = !this.checked;
    });
}

</script>
</html>