全选反选

最新推荐文章于 2022-09-25 22:01:26 发布

daydaymiddle

最新推荐文章于 2022-09-25 22:01:26 发布

阅读量283

点赞数

分类专栏： jquery练习文章标签： jquery

本文链接：https://blog.youkuaiyun.com/daydaymiddle/article/details/72833468

版权

jquery练习专栏收录该内容

4 篇文章

订阅专栏

写在前面：在例子中直接使用attr( )时，会出现bug，第一次可以，后面就无效了，改成使用prop( )，完美解决。
使用的话：元素本身自带的属性用prop，自定义的用attr

全选，反选源码
这里写图片描述

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<style>
table tr td{border:1px solid red;}
</style>
<body>
<table style="border:1px solid">
    <tr><td><input type="checkbox" class="using"></td><td>阿sa</td></tr>
    <tr><td><input type="checkbox" class="using"></td><td>李沁</td></tr>
    <tr><td><input type="checkbox" class="using"></td><td>热巴</td></tr>
    <tr><td><input type="checkbox" id="allchoose">全选</td></tr>
</table>
<script>
$(function(){
    $('#allchoose').change(function(){
        if($('#allchoose').is(':checked')){
            $('.using').prop('checked',true)
        }else{
            $('.using').prop('checked',false)  
        }   
    })
})
</script>
</body>
</html>