jQuery全选反选全不选

最新推荐文章于 2024-04-25 11:38:14 发布

qimingnanhhh

最新推荐文章于 2024-04-25 11:38:14 发布

阅读量6.7k

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qimingnanhhh/article/details/78502996

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script>
        <script>
            $(function() {  //prop和attr方法都是设置或者修改被选元素的属性，
        // prop方法用于HTML元素本身就带有的固有属性，
        // attr方法用于HTML元素自己定义的dom属性，

        $("#checkedAll").click(function() {

            if (this.checked) {

                $("[name=check]:checkbox").prop("checked", true);
            }else {

                $("[name=check]:checkbox").prop("checked", false);
            }
        });

        $("#checkboxAll").click(function() {

            $("[name=check]:checkbox").prop("checked", true);
        });

        $("#checkedNo").click(function() {

            $("[name=check]:checkbox").prop("checked", false);
        });

        $("#checkedRev").click(function() {

            $("[name=check]:checkbox").each(function() {
                console.log(this.checked);
                this.checked = !this.checked//this指当前的html对象
            });
        });

        $("#submit").click(function() {

            var str = "你喜欢的是："
            $("[name=check]:checkbox:checked").each(function() {

                str += $(this).val() + "||";//这里$(this)指的是jquery对象
            })

            console.log(str);
        });
    })

        </script>

    </head>
    <body>
<form>

        <label ><input type="checkbox" name="check" >唱歌</label>
        <label ><input type="checkbox" name="check">跳舞</label>
        <label ><input type="checkbox" name="check">吃饭</label>
        <label ><input type="checkbox"  name="check">烫头</label>
        <br>
        <input type="button" name="all" id="checkboxAll" value="全 选">
        <input type="button" name="no" id="checkedNo" value="全不选">
        <input type="button" name="reverse" id="checkedRev" value="反 选">

    </form>



    </body>
</html>

qimingnanhhh

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery全选反选全不选

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jQuery/jquery-2.1.1.js" ></script> <script> $(
复制链接

扫一扫