星空网 > 软件开发 > Java

常见前端效果实现

一、选中左右侧内容到另一侧:选中左侧内容到右侧,选中右侧内容到左侧

常见前端效果实现常见前端效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>  <style type="text/css">    select {      width: 100px;      height: 140px;    }        div {      width: 130px;      float: left;      text-align: center;    }  </style>  <script type="text/javascript" src='/images/loading.gif' data-original="script/jquery-1.7.2.js"></script>  <script type="text/javascript">        $(function(){      $("button:eq(0)").click(function(){        $("select[name=sel01] :selected").each(function(){          $(this).appendTo("select[name=sel02]");        });      });            $("button:eq(1)").click(function(){        $("select[name=sel01] option").each(function(){          $(this).appendTo("select[name=sel02]");        });      });            $("button:eq(2)").click(function(){        $("select[name=sel02] :selected").each(function(){          $(this).appendTo("select[name=sel01]");        });      });            $("button:eq(3)").click(function(){        $("select[name=sel02] option").each(function(){          $(this).appendTo("select[name=sel01]");        });      });    });  </script></head><body>  <div id="left">    <select multiple="multiple" name="sel01">      <option value="opt01">选项1</option>      <option value="opt02">选项2</option>      <option value="opt03">选项3</option>      <option value="opt04">选项4</option>      <option value="opt05">选项5</option>      <option value="opt06">选项6</option>      <option value="opt07">选项7</option>      <option value="opt08">选项8</option>    </select>        <button>选中添加到右边</button>    <button>全部添加到右边</button>  </div>  <div id="rigth">    <select multiple="multiple" name="sel02">    </select>    <button>选中删除到左边</button>    <button>全部删除到左边</button>  </div></body></html>

View Code

二、全选全不选

常见前端效果实现常见前端效果实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src='/images/loading.gif' data-original="../jquery-1.7.2.js"></script><script type="text/javascript">  $(function(){        var $items = $(":checkbox[name=items]");        $("#checkedAllBtn").click(function(){      $items.add("#checkedAllBox").attr("checked",true);    });    $("#checkedNoBtn").click(function(){      $items.add("#checkedAllBox").attr("checked",false);    });    $("#checkedRevBtn").click(function(){      $(":checkbox[name=items]").each(function(){        this.checked = !this.checked;      });      $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));    });    $("#checkedAllBox").click(function(){      $items.attr("checked",this.checked);    });    $items.click(function(){      $("#checkedAllBox").attr("checked",($items.filter(":checked").length == $items.length));    });    $("#sendBtn").click(function(){      $items.filter(":checked").each(function(){        alert(this.value);      });    });  });</script></head><body>  <form method="post" action="">    你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选         <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="checkedAllBtn" value="全 选" />    <input type="button" id="checkedNoBtn" value="全不选" />    <input type="button" id="checkedRevBtn" value="反 选" />    <input type="button" id="sendBtn" value="提 交" />  </form></body></html>

View Code

 




原标题:常见前端效果实现

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

如何通过Amazon前后台获取关键词?:https://www.ikjzd.com/articles/111968
在Instagram上,如何更好地实现推广引流?:https://www.ikjzd.com/articles/111969
助力双12大促:Shopee推出广告金奖励计划!:https://www.ikjzd.com/articles/111970
黑五被封号,网一遭恶搞,这48小时我经历了什么?:https://www.ikjzd.com/articles/111971
黑五被封号,网一遭恶搞,这48小时我经历了什么?:https://www.ikjzd.com/articles/111972
亚马逊网一大促再破记录 成历史最大购物日:https://www.ikjzd.com/articles/111973
品牌出海新机遇,玩转“新兴”与“王牌”主题沙龙成功举办!:https://www.kjdsnews.com/a/1836370.html
每月资讯 | CBD为您带来最新行业动态:https://www.kjdsnews.com/a/1836371.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流