jQuery判断checkbox，radio是否选中

最新推荐文章于 2020-09-28 08:40:07 发布

置顶最骚的就是你

最新推荐文章于 2020-09-28 08:40:07 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端学习文章标签： jquery checkbox something

本文链接：https://blog.youkuaiyun.com/libin_1/article/details/51335322

web前端学习专栏收录该内容

301 篇文章

订阅专栏

该博客介绍了如何使用jQuery来判断和操作checkbox及radio的选择状态，包括全选、全不选和反选的功能实现。

这里写图片描述

兄弟文章： http://blog.youkuaiyun.com/libin_1/article/details/50734967

方法一：
if ($("#checkbox-id").get(0).checked) {
    // do something
}

方法二：
if($('#checkbox-id').is(':checked')) {
    // do something
}

方法三：
if ($('#checkbox-id').attr('checked')) {
    // do something
}

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="js/jquery-2.2.2.min.js"></script>
        <title>Document</title>
        <script type="text/javascript">
            $(function() {
                $("#button").click(function() {
                    var h = $("input[type='checkbox']").length;
                    var s = '';
                    for (var i = 0; i < h; i++) {
                        if ($("input[type='checkbox']").eq(i).is(':checked')) {
                            s += $("input[type='checkbox']").get(i).value;
                        }
                    }
                    alert(s);
                })
            })
        </script>
        <script type="text/javascript">
            $(function() {
                $("#button1").click(function() {
                    var h = $("input[type='radio']").length;
                    var s = '';
                    for (var i = 0; i < h; i++) {
                        if ($("input[type='radio']").eq(i).is(':checked')) {
                            s += $("input[type='radio']").eq(i).val();
                        }
                    }
                    alert(s);
                })
            })
        </script>
    </head>

    <body>
        <input type="checkbox" name="box" id="box1" value="跳水" checked="checked" />跳水
        <input type="checkbox" name="box" id="box2" value="跑步" />跑步
        <input type="checkbox" name="box" id="box3" value="听音乐" />听音乐
        <input type="button" name="button" id="button" value="提交" />
   <br />
        <input type="radio" name="box" id="box1" value="跳水" checked="checked" />跳水
        <input type="radio" name="box" id="box2" value="跑步" />跑步
        <input type="radio" name="box" id="box3" value="听音乐" />听音乐
        <input type="button" name="button" id="button1" value="提交" />
    </body>

</html>

全选，全不选，反选

<!doctype html>
<html lang="en">

    <head>
        <title>全选，不全选，反选</title>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(function() {
                $("#selectAll").click(function() { //全选  
                    $(":checkbox").prop("checked", true);
                });
                $("#unSelect").click(function() { //全不选  
                    $(":checkbox").prop("checked", false);
                });
                $("#reverse").click(function() { //反选  
                    $(":checkbox").each(function() {
                        $(this).prop("checked", !$(this).prop("checked"));
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="playList">
            <input type="checkbox" value="歌曲1" />歌曲1<br />
            <input type="checkbox" value="歌曲2" />歌曲2<br />
            <input type="checkbox" value="歌曲3" />歌曲3<br />
            <input type="checkbox" value="歌曲4" />歌曲4<br />
            <input type="checkbox" value="歌曲5" />歌曲5<br />
            <input type="checkbox" value="歌曲6" />歌曲6
        </div>
        <input type="button" value="全选" id="selectAll" />
        <input type="button" value="全不选" id="unSelect" />
        <input type="button" value="反选" id="reverse" />
    </body>

</html>