checkbox的全选全不选，反选，奇偶选择，获取checkbox值

芬梧书生

于 2019-01-02 10:21:36 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_42693512/article/details/85597297

前端开发专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何利用jQuery库简化HTML表单的操作，包括全选、全不选复选框，以及收集选中项的值。通过示例代码展示了如何使用jQuery选择器和事件处理函数实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<input type="button" id="check_all" value="全选">
    <input type="button" id="check_none" value="全不选">
    <input type="checkbox" name="test" value="1"> <span>1</span>
    <input type="checkbox" name="test" value="2"> <span>2</span>
    <input type="checkbox" name="test" value="3"> <span>3</span>
    <input type="checkbox" name="test" value="4"> <span>4</span>
    <input type="checkbox" name="test" value="5"> <span>5</span>
    <input type="button" value="提交" onclick="fun_submit()">

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

    <script>
        function fun_submit() {

            /*  js实现  
            obj = document.getElementsByName("test");
 
             check_val = [];
 
             for (k in obj) {
 
                 if (obj[k].checked)
 
                     check_val.push(obj[k].value);
 
             }
 
             console.log(check_val); */

            var check_val = [];
            $("input[name='test']:checked").each(function () {
                check_val.push($(this).val())
            })
            console.log(check_val);


        }
        //全选
        $("#check_all").click(function () {
            $("input[name='test']").attr("checked", "true");
        })
        //全不选
        $("#check_none").click(function () {
            $("input[name='test']").removeAttr("checked");
        })
       /*  //选中所有基数 
        $("#btn3").click(function () {
            $("input[name='checkbox']:even").attr("checked", "true");
        })
        //选中所有偶数 
        $("#btn6").click(function () {
            $("input[name='checkbox']:odd").attr("checked", "true");
        })
        //反选 
        $("#btn4").click(function () {
            $("input[name='checkbox']").each(function () {
                if ($(this).attr("checked")) {
                    $(this).removeAttr("checked");
                }
                else {
                    $(this).attr("checked", "true");
                }
            })
        }) */




    </script>