Jquery----简单的选择

来源：互联网发布：优化网站的文件和资源编辑：程序博客网时间：2024/04/27 06:57

<body><form method="post" action="">   请选择您的爱好!<br><input type="checkbox" id="checkedAll_"/>全选/全不选   <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">  $("#checkedAll_").click(function (){if(this.checked){$("input[name='items']").attr("checked","checked");}else{$("input[name='items']").removeAttr("checked");}});//全选$('#CheckedAll').click(function(){$("input[name='items']").attr("checked", "checked");});//全不选$('#CheckedNo').click(function(){$("input[name='items']").attr("checked", "");});//反选$('#CheckedRev').click(function(){$("input[name='items']").each(function(){if(this.checked){$(this).attr("checked","");}else{$(this).attr("checked","checked");}})});</script>

<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">  <tr>    <td width="70">    <!--"multiple" 能同时选择多个   size="10"  确定下拉选的长度--><select name="first" size="10" multiple="multiple" class="td3" id="first">  <option value="AA1">AA1</option>  <option value="AA2">AA2</option>  <option value="AA3">AA3</option>  <option value="AA4">AA4</option>  <option value="AA5">AA5</option>  <option value="AA6">AA6</option>  <option value="AA7">AA7</option>  <option value="AA8">AA8</option></select>    </td>    <td width="69" valign="middle">       <input name="add"  id="add" type="button" class="button" value="-->" />        <input name="add_all" id="add_all" type="button" class="button" value="==>" />        <input name="remove"  id="remove" type="button" class="button" value="<--" />   <input name="remove_all" id="remove_all" type="button" class="button" value="<==" />        </td>    <td width="127" align="left">  <select name="second" size="10" multiple="multiple" class="td3" id="second">         <option value="AA9">AA9</option>      </select></td>  </tr></table><script type="text/javascript">$(document).ready(function(){$("#add").click(function(){$("#first option:selected").appendTo($("#second"));});$("#add_all").click(function(){$("#first option").appendTo($("#second"));});$("#remove").click(function(){$("#second option:selected").appendTo($("#first"));});$("#remove_all").click(function(){$("#second option").appendTo($("#first"));});//双击$("#first:option").dblclick(function (){$("#first option:selected").appendTo("#second");});$("#second").dblclick(function (){$("#second option:selected").appendTo("#first");});});</script></html>

0 0