• 表单应用


    <body>
            <select multiple="multiple" name="form" id="select1" style="height: 160px;  150px; border: 0; outline: none;">
                <option value="1">qqqq</option>
                <option value="2">wwww</option>
                <option value="3">eeee</option>
                <option value="4">rrrr</option>
                <option value="5">tttt</option>
                <option value="6">yyyy</option>
                <option value="7">uuuu</option>
                <option value="8">oooo</option>
            </select>
         
            <select multiple="multiple" name="form2" id="select2" style="height: 160px;  150px; border: 0;outline: none;"></select>
            <hr />
            
            <form action="" method="post">
                你的爱好是什么?<br />
                <labal><input type="checkbox" name="items" value="足球"/>足球</labal>
                <labal><input type="checkbox" name="items" value="篮球"/>篮球</labal>
                <labal><input type="checkbox" name="items" value="乒乓球"/>乒乓球</labal>
                <labal><input type="checkbox" name="items" value="羽毛球"/>羽毛球</labal>
                <labal><input type="checkbox" name="items" value="破气球"/>破气球</labal>
                <br />
                <br />
                <input type="button" id="checkoutAll" value="全 选" />
                <input type="button" id="checkoutNo" value="全不选" />
                <input type="button" id="checkoutRev" value="反 选" />
                <input type="button" id="send" value="提  交" />
            </form>
            <hr />
            
            <script src="js/jquery/jquery-1.11.3.min.js"></script>
            <script type="text/javascript">
                $(function(){
                    $("#select1").bind("click",function(){
                        var options = $("option:selected",this);
                        options.appendTo("#select2");
                    });
                    
                    $("#select2").bind("click",function(){
                        var options = $("option:selected",this);
                        options.appendTo("#select1");
                    });
                    
                    //全选
                    $("#checkoutAll").bind("click",function(){
                        $("[name=items]:checkbox").attr("checked",true);
                    });
                    
                    //全不选
                    $("#checkoutNo").bind("click",function(){
                        $("[name=items]:checkbox").attr("checked",false);
                    });
                    
                    //反选
                    $("#checkoutRev").bind("click",function(){
                        $("[name=items]:checkbox").each(function(){
                            //$(this).attr("checked",!$(this).attr("checked"));
                            this.checked=!this.checked;
                        });
                    });
                    //提交
                    $("#send").bind("click",function(){
                        var str="你选中的是:
    ";
                        $("[name=items]:checkbox:checked").each(function(){
                            str += $(this).val()+"
    ";
                        });
                        alert(str);
                        
                    });
                    
                });
            </script>
        </body>

     

  • 相关阅读:
    Consul的反熵
    Swift:一个基于.NET Core的分布式批处理框架
    C03:架构,面向人的设计,面向业务的建模
    架构-W01-食堂就餐卡系统设计
    架构C02:商业模式与架构设计
    架构C01: 什么是架构?为什么做架构?架构师需要做什么?
    程序中的日志
    物联网这一次应该是认真的!
    移动端H5混合开发设置复盘与总结
    span 英文数字保持一行,中文自动换行
  • 原文地址:https://www.cnblogs.com/xiangru0921/p/6526426.html
Copyright © 2020-2023  润新知