jQuery小练习4——多选框应用

最新推荐文章于 2023-03-21 19:06:30 发布

阅读量874

点赞数

分类专栏： JavaScript 文章标签： jquery

本文链接：https://blog.csdn.net/cckevincyh/article/details/53156188

版权

JavaScript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
    </head>
    <body>
        <form method="post" action="">
            请选择您的爱好!
            <br><input type="checkbox" id="checkedAll_2"/>全选/全不选
            <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="CheckedNo" value="全不选"/>
            <input type="button" id="CheckedRev" value="反　选"/> 

            <input type="button" id="send" value="提　交"/> 
        </form>
    </body>
    <script language="JavaScript">
        //<input type="button" id="CheckedAll" value="全　选"/>
        $("#CheckedAll").click(function(){
            /*
             * <input type="checkbox" name="items" value="足球"/>足球
            <input type="checkbox" name="items" value="篮球"/>篮球
            <input type="checkbox" name="items" value="游泳"/>游泳
            <input type="checkbox" name="items" value="唱歌"/>唱歌
             */
//          $("input[name=items]").each(function(index,domEle){
//              $(domEle).attr("checked","checked");
//          });

            $("input[name=items]").attr("checked","checked");

        });

        //<input type="button" id="CheckedNo" value="全不选"/>
        $("#CheckedNo").click(function(){
//          $("input[name=items]").attr("checked",null);

            $("input[name=items]").removeAttr("checked");
        });


        //<input type="button" id="CheckedRev" value="反　选"/> 
        $("#CheckedRev").click(function(){
            $("input[name=items]").each(function(index,domEle){
                if($(domEle).attr("checked")){
                    $(domEle).attr("checked",null);
                }else{
                    $(domEle).attr("checked","checked");
                }
            });
        });

        //<input type="checkbox" id="checkedAll_2"/>全选/全不选
        $("#checkedAll_2").click(function(){
            if($(this).attr("checked")){
                $("input[name=items]").attr("checked","checked");
            }else{
                $("input[name=items]").attr("checked",null);
            }
        });


    </script>
</html>

这里写图片描述

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery小练习4——多选框应用

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>U
复制链接

扫一扫

专栏目录