jquery中的表单验证
1 <form id="form1" > 2 <input type="radio" name="sex" value="男" />男 3 <input type="radio" name="sex" value="女" />女 4 <br /> 5 <input type="radio" name="list" value="十分满意" />十分满意 6 <input type="radio" name="list" value="满意" />满意 7 <input type="radio" name="list" value="不满意" />不满意 8 <input type="radio" name="list" value="非常差" />非常差 9 <br /> 10 <input type="submit" value="submit" id="btnSubmit" /> 11 </form> 12 13 <script> 14 $("#btnSubmit").click(function(){ 15 var val=$('input:radio[name="sex"]:checked').val(); 16 if(val==null){ 17 alert("什么也没选中!"); 18 return false; 19 } 20 else{ 21 alert(val); 22 } 23 var list= $('input:radio[name="list"]:checked').val(); 24 if(list==null){ 25 alert("请选中一个!"); 26 return false; 27 } 28 else{ 29 alert(list); 30 } 31 }); 32 </script>
判断复选框是否选中和拿值
<form> 你爱好的运动是?<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="send" value="提 交"/> </form> <script> $(function(){ //全选 $("#CheckedAll").click(function(){ if(this.checked){ //如果当前点击的多选框被选中 $('input[type=checkbox][name=items]').attr("checked", true ); }else{ $('input[type=checkbox][name=items]').attr("checked", false ); } }); $('input[type=checkbox][name=items]').click(function(){ var flag=true; $('input[type=checkbox][name=items]').each(function(){ if(!this.checked){ flag = false; } }); if( flag ){ $('#CheckedAll').attr('checked', true ); }else{ $('#CheckedAll').attr('checked', false ); } }); //输出值 $("#send").click(function(){ var str="你选中的是:\r\n"; $('input[type=checkbox][name=items]:checked').each(function(){ str+=$(this).val()+"\r\n"; }) alert(str); }); }) </script>
判断下拉列表是否选中
<div class="centent"> <select multiple="multiple" id="select1" style="width:100px;height:160px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> <option value="6">选项6</option> <option value="7">选项7</option> </select> <div> <span id="add" >选中添加到右边>></span> <span id="add_all" >全部添加到右边>></span> </div> </div> <div class="centent"> <select multiple="multiple" id="select2" style="width: 100px;height:160px;"> <option value="8">选项8</option> </select> <div> <span id="remove"><<选中删除到左边</span> <span id="remove_all"><<全部删除到左边</span> </div> </div> <script type="text/javascript"> $(function(){ //移到右边 $('#add').click(function() { //获取选中的选项,删除并追加给对方 $('#select1 option:selected').appendTo('#select2'); }); //移到左边 $('#remove').click(function() { $('#select2 option:selected').appendTo('#select1'); }); //全部移到右边 $('#add_all').click(function() { //获取全部的选项,删除并追加给对方 $('#select1 option').appendTo('#select2'); }); //全部移到左边 $('#remove_all').click(function() { $('#select2 option').appendTo('#select1'); }); //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $("option:selected",this).appendTo('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){ $("option:selected",this).appendTo('#select1'); }); }); </script>

浙公网安备 33010602011771号