静态的下拉菜单选框删除

最新推荐文章于 2022-06-09 09:08:41 发布

程序员的美腻

最新推荐文章于 2022-06-09 09:08:41 发布

阅读量378

点赞数

本文链接：https://blog.csdn.net/qq_40087961/article/details/78516643

版权

      $("#province").change(function(){
                  var province=$(this).val();
                   if(province == "北京"){
                       //选中北京怎么更改城市下拉菜单中的内容
                       var city = $("<option  selected='selected'>海淀区</option><option>昌平区</option><option>朝阳区</option><option>大兴区</option>");
                       $("#city").html(city);

                   }
                   if(province == "河北"){
                       var city = $("<option  >石家庄</option><option>唐山</option><option>保定</option><option selected='selected'>邢台</option>");
                       $("#city").html(city);
                   }
                   if(province == "山西"){
                       var city = $("<option  selected='selected'>运城</option><option>太原</option><option>临汾</option><option>大同</option>");
                       $("#city").html(city);
                   }

               });

            //批量删除，点击删除，删除选中的元素
            $("#del").click(function(){
                //data表格下有是checked且没有id属性的都删除
                $("#data :checked").not("[id]").parent().parent().remove(); //移除所有被选中的input元素


            })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo{width:520px; margin:40px auto 0 auto; min-height:250px;}
        ul li{line-height:30px; padding:4px 0; font-size:14px; list-style: none}
    </style>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script>
        $(function(){
            //选矿的点击事件
            $("#all").click(function(){
                //判断全选的多选框是否被选中,如果是选中的那就将chenkbox框设置成选中状态的
                //否则为默认不选中状态
                if(this.checked){
                    $(".ch").prop("checked",true);
                }else{
                    $(".ch").prop("checked",false);
                }
            });
            //全选按钮
            $("#quan").click(function(){
                $(".ch , #all").prop("checked",true);
            });
            //全不选
            $("#quanbu").click(function(){
                $(".ch , #all").prop("checked",false);

            })
            //反选按钮
            //反选时不选中全选的CheckBox框
            $("#fan").click(function(){
                //遍历选框的默认状态
                $(".ch").each(function(){
                // !$(this).prop("checked"),,,,,是指点击按钮时,在遍历数组的同时找的默认选中的,
                    // 加叹号就是指没选中的,,,,,,
                    //再将没选中的选中,而选中的就变为没选中的了
                    $(this).prop("checked",!$(this).prop("checked"));
                    //点击按钮时,全选框的状态
                    chall();
                });
            });
            //多个选框设置点击事件
            $(".ch").click(function () {
               chall();
            });
        });
        function chall(){
            var chnum=$(".ch").size();//选框的总数
            //定义一个初始变量
            var chk=0;
            $(".ch").each(function () {
                if($(this).prop("checked")==true){
                    //遍历将数据的总数累加纪录
                    chk++;
                }
            });
            if(chnum==chk){
                $("#all").prop("checked",true);
            }else{
                $("#all").prop("checked",false);
            }

        }
    </script>
</head>
<body>
<div id="demo">

    <ul>
        <li><input type="checkbox" class="ch" value="1"/>1.80000</li>
        <li><input type="checkbox" class="ch" value="2"/>2.齐天大圣</li>
        <li><input type="checkbox" class="ch" value="3"/>3.喜欢你</li>
        <li><input type="checkbox" class="ch" value="4"/>4.小跳蛙</li>
        <li><input type="checkbox" class="ch" value="5"/>5.全部都是你</li>
        <li><input type="checkbox" class="ch" value="6"/>6.七里香</li>
    </ul>
    <input type="checkbox" id="all" />
    <input type="button" class="btn" id="quan" value="全选"/>
    <input type="button"  class="btn" id="fan" value="反选"/>
    <input type="button"  class="btn" id="quanbu" value="全不选"/>
    <input type="button" value="获得选中的所有值" class="btn" id="dz">
</div>

</body>
</html>