你的位置:首页 > Java教程

[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="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="../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