checkbox 操作实现

最新推荐文章于 2021-02-05 11:16:20 发布

自找苦吃，自得其乐

最新推荐文章于 2021-02-05 11:16:20 发布

阅读量557

点赞数

分类专栏： 12_html

本文链接：https://blog.csdn.net/tengdazhang770960436/article/details/8457480

版权

12_html 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        /**
         * 全选实现
         * @param all 全选 checkbox 本身
         * @param items 被选择的子 checkbox
         */
        function checkAll(all,items) {
            var state = all.checked;
            if(items.length) {
                for(var i=0;i<items.length;i++) {
                    items[i].checked = state;
                }
            }
        }

        /**
         * 获取被选中的子 checkbox 值集合字符串
         * @param elementsName 子 checkbox 元素名称
         */
        function getCheckAdIds(elementsName) {
            var adIds = "";
            $("input:checkbox[name=" + elementsName + "]:checked'").each(function(i){
                if(0==i){
                    adIds = $(this).val();
                }else{
                    adIds += (","+$(this).val());
                }
            });
            alert(adIds);
//            return adIds;
        }

        /**
         * 初始化被选中的 子 checkbox
         * @param initVal 被选中的 checkbox 初始值
         * @param elementsName 子元素名称
         */
        function initSelect(initVal, elementsName) {
            if(initVal!=null && initVal != "") {
                var idarr = initVal.split(",");
                for(var i=0; i < idarr.length; i++) {
                    $("[name = " + elementsName + "][value$="+ idarr[i] +"]:checkbox").attr("checked", true);
                }
            }
        }

    </script>
</head>
<body>

    <input name="check" type="checkbox" value="1"/>1
    <input name="check" type="checkbox" value="2"/>2
    <input name="check" type="checkbox" value="3"/>3
    <input name="check" type="checkbox" value="4"/>4
    <input name="check" type="checkbox" value="5"/>5
    <input name="check" type="checkbox" value="6"/>6<br/>

    <hr>
    <input type="checkbox" name="checkAll1" οnclick="checkAll(this,document.getElementsByName('check'))">全选 >> 按照元素名称选择
    <hr>
    <button οnclick="getCheckAdIds('check')">获取选中元素的值</button>
    <hr>
    <input type="text" id="initValue" value="1,2,3">
    <button οnclick="initSelect( $('#initValue').val(),'check')">初始化被选中的元素</button>

</body>
</html>

自找苦吃，自得其乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
checkbox 操作实现

function selectAll(all,items) { var state = all.checked; if(items.length) { for(var i=0;i<items.length;i++) { items[i].checked = state; } } }
复制链接

扫一扫

专栏目录