码迷,mamicode.com
首页 > Web开发 > 详细

Jquery全选系列操作(锋利的jQuery)

时间:2019-01-30 00:21:29      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:选中   EDA   jquery   rev   研究   乒乓球   send   function   简化   

Jquery全选系列操作(锋利的jQuery)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>复选框应用</title>
    <script src="../../js/jquery-1.4.4.min.js"></script>
</head>
<body>
    <form >
        你爱好的运动是?<br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
        <input type="button" id="CheckedAll" value="全选" />
        <input type="button" id="CheckedAllNo" value="全不选" />
        <input type="button" id="CheckedRev" value="反选" />
        <input type="button" id="send"   value="提交" />
    </form>

    <!--<form style="display:none" >
        你爱好的运动是?<br />
        <input type="button" id="CheckedAll" value="全选/全不选" />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br />
    </form>-->
    <script>
        $(function ()
        {
            //全选
            $("#CheckedAll").click(function () {

                 $(‘[name=items]:checkbox‘).attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。

                //下面只是研究,或者是可参考,(我还没弄懂)
                //判断如果当前复选框被选中
                //if (this.checked) {
                //    $(‘[name=items]:checkbox‘).attr("checked", true);  //attr() 方法设置或返回被选元素的属性值。
                //}
                //else {
                //    $(‘[name=items]:checkbox‘).attr("checked", false);  //attr() 将checked 设置为false即被全不选。
                //}

                //$(‘[name=items]:checkbox‘).attr("checked", this.checked);  //attr() 方法设置或返回被选元素的属性值。

                //可以去掉if判断
                //$(‘[name=items]:checkbox‘).click(function () {
                //    var flag = true;
                //    $(‘[name=items]:checkbox‘).each(function () {
                //        if (!this.checked) {
                //            flag = false;
                //        }
                //    });
                //    $("#checkedall").attr("checked", flag);
                //})
             

            });
            //全不选
            $("#CheckedAllNo").click(function () {
                $(‘[name=items]:checkbox‘).attr("checked", false);  //attr() 将checked 设置为false即被全不选。
            });

            //反选,如果选中,则不选中,如果不选中则选中
            //$("#CheckedRev").click(function () {
            //    $(‘[name=items]:checkbox‘).each(function () {
            //        $(this).attr("checked", !$(this).attr("checked"));  //$(this)取出当前对象并转换为jQuery对象
            //    })
            //});

            //代码简化反选
            $("#CheckedRev").click(function () {
                $(‘[name=items]:checkbox‘).each(function () {
                    this.checked = !this.checked;
                })
            });

            //提交显示选中的check值
            $("#send").click(function ()
            {
                var str = "你选中的是\r\n";
                $(‘[name=items]:checkbox:checked‘).each(function () {
                    str += $(this).val() + "\r\n";
                });
                alert(str)
            })
        })
    </script>
</body>
</html>

  

Jquery全选系列操作(锋利的jQuery)

标签:选中   EDA   jquery   rev   研究   乒乓球   send   function   简化   

原文地址:https://www.cnblogs.com/chaonuanxi/p/10336230.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!