复选数据框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div>全选<input type="checkbox" id="qx" /></div> <div> 植物园<input type="checkbox" class="ck" value="植物园" /> 公园<input type="checkbox" class="ck" value="公园" /> 医院<input type="checkbox" class="ck" value="医院" /> 餐厅<input type="checkbox" class="ck" value="餐厅" /> </div><br /> <div><input type="button" value="取值" id="btn" /></div><br /> <div> 请输入区域:<input type="text" id="qy" /> <input type="button" value="设置选中" id="szxz" /> </div> </body> <script type="text/javascript"> $(document).ready(function(e) { $("#qx").click(function(){ //找到全选按钮的选中状态 var xz=$(this).prop("checked"); //将复选框列表里面所有的复选框的选中状态变为全选的选择状态 $(".ck").prop("checked",xz); }) $("#btn").click(function(){ var ck=$(".ck"); for(var i=0;i<ck.length;i++) { //取JQUERY对象 //ck.eq(i).prop("checked"); //取DOM对象 //ck[i].checked if(ck.eq(i).prop("checked")) { alert(ck.eq(i).val()); } } }) $("#szxz").click(function(){ //获取用户输入的值 var qy=$("#qy").val(); //设置选中 var ck=$(".ck"); ck.prop("checked",false); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==qy) { ck.eq(i).prop("checked",true); } } }) }); </script> </html>
单选数据框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div> 植物园<input type="radio" name="qy" class="ck" value="植物园" /> 公园<input type="radio" name="qy" class="ck" value="公园" /> 医院<input type="radio" name="qy" class="ck" value="医院" /> 餐厅<input type="radio" name="qy" class="ck" value="餐厅" /> </div><br /> <div><input type="button" value="取选中值" id="btn" /></div> </body> <script type="text/javascript"> $(document).ready(function(e) { $("#btn").click(function(){ var ck=$(".ck"); //利用for循环输出 for(var i=0;i<ck.length;i++) { if(ck.eq(i).prop("checked")) { alert(ck.eq(i).val()); } } }) }); </script> </html>
下拉数据条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> </head> <body> <select id="qy"> <option value="1">所有</option> <option value="植物园">植物园</option> <option value="公园">公园</option> <option value="医院">医院</option> <option value="餐厅">餐厅</option> </select> <input type="button" value="取选中值" id="btn" /><br /> <div>请输入： <input type="text" id="zhi" /> <input type="button" value="设置选中" id="szxz" /> </div> </body> <script type="text/javascript"> $(document).ready(function(e) { $("#btn").click(function(){ alert($("#qy").val()); }) $("#szxz").click(function(){ var zhi=$("#zhi").val(); var op=$("option"); /*for(var i=0;i<op.length;i++) { //op.eq(i).prop("selected"); if(op.eq(i).val()==zhi) { op.eq(i).prop("selected",true); } }*/ $("#qy").val(zhi); }) }); </script> </html>