jQuery实现全选,反选和选择动态生成的标签样例

最新推荐文章于 2020-11-16 14:31:20 发布

Interphalangeal

最新推荐文章于 2020-11-16 14:31:20 发布

阅读量285

点赞数

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

本文链接：https://blog.csdn.net/Interphalangeal/article/details/100124579

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

好久没用jQuery了,很多基础的东西都忘了,项目需要如下功能,自己整理了一套,拿来即用;

<!DOCTYPE html>
<html>

<head>
    <title>jQuery实现全选,反选和选择动态生成的标签样例</title>
</head>
<script src="G:\\jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    //jquery无法获取动态生成的html标签,只能获取它的父标签-----jQuery on()
    //https://www.cnblogs.com/zhangruiqi/p/7886442.html
    $("body").on("click", ":checkbox[name=tab_order_id]", function() {
        $("#head_checkbox").prop('checked', $(":checkbox[name=tab_order_id]").length == $(":checkbox[name=tab_order_id]:checked").length)

    })
})

//全选
function checkAll() {

    if ($("#head_checkbox").prop("checked")) {
        $(":checkbox[name=tab_order_id]").each(function() {
            $(this).prop('checked', true);
        });

    } else {
        $("input[name=tab_order_id]").each(function() {
            $(this).prop('checked', false);
        });

    }
}

//反选 <input type="checkbox" name="tab_order_id" value="001" onclick="reverseCheck()">
function reverseCheck() {

    $("#head_checkbox").prop('checked', $(":checkbox[name=tab_order_id]").length == $(":checkbox[name=tab_order_id]:checked").length)
}
</script>

<body>
    <!-- 静态的 -->
    <input type="checkbox" id="head_checkbox" onclick="checkAll()"> 
    <!-- 以下是模拟后台返回动态生成的标签 -->
    <input type="checkbox" name="tab_order_id" value="001">
    <input type="checkbox" name="tab_order_id" value="002">
    <input type="checkbox" name="tab_order_id" value="003">
</body>

</html>

Interphalangeal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现全选,反选和选择动态生成的标签样例

好久没用jQuery了,很多基础的东西都忘了,项目需要如下功能,自己整理了一套,拿来即用;<!DOCTYPE html><html><head> <title>jQuery实现全选,反选和选择动态生成的标签样例</title></head><script src="G:\\jquery-1.7.2...
复制链接

扫一扫