checkbox 操作【全选获取选中的值】

最新推荐文章于 2021-12-16 11:18:43 发布

执着更专业

最新推荐文章于 2021-12-16 11:18:43 发布

阅读量601

点赞数

分类专栏： JavaScript Jquery 常用文章标签： checkbox

本文链接：https://blog.csdn.net/pangchengyong0724/article/details/52690972

版权

JavaScript 同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

Jquery

17 篇文章 0 订阅

订阅专栏

常用

7 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>

<input type="checkbox" onclick="checkAll(this)">一行全选<br><br>
<input type="button"   onclick="huoqu(this)" value="获取选中的值">
<div id="box">
    <input value="11" name="test" type="checkbox"><br>
    <input value="12" name="test" type="checkbox"><br>
    <input value="13" name="test" type="checkbox"><br>
    <input value="14" name="test" type="checkbox"><br>
    <input value="15" name="test" type="checkbox"><br>
    <input value="16" name="test" type="checkbox"><br>
    <input value="17" name="test" type="checkbox"><br>
    <input value="18" name="test" type="checkbox"><br>
    <input value="19" name="test" type="checkbox"><br>
</div>

</body>
</html>
<script type="text/javascript">

    /**
     * 全选
     */
    function checkAll(obj){
        $('#box :checkbox').prop('checked',$(obj).prop('checked'));
    }

    /**
    * 获取复选框选中的值
    * */
    function huoqu(s) {

        // 数组返回格式
        var chk_value = [];
        $('input[name="test"]:checked').each(function () {
            chk_value.push($(this).val());
        });
        //["11", "12", "13", "14"]


        // 返回字符串 以,号分割  并去掉最后一个,
        var str='';
        $('input[name="test"]:checked').each(function () {
            str+=$(this).val()+',';
        });
        var res_str = str.substr(0,str.length-1);
        //11,12,13,14
    }
</script>