Jquery操作各种表单元素 select checkbox radio

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>testJquery.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css" mce_href="styles.css">--> <mce:script type="text/javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function() { $("#selAll").click(function() { if($(this).attr("checked")) { $("input[name='chk']").each(function() { $(this).attr("checked", true); }); } else { $("input[name='chk']").each(function() { $(this).attr("checked", false); }); } }); }); function sel(id) { $("#sel").attr("value", id); } function clear() { $("#sel").get(0).options.length = 0; } function add() { var append = "<option>123</option>" //追加 $("#sel").append(append); //最前面插入 //$("#sel").prepend(append); } function remove() { $("#sel").find("option[value=2]").remove(); } function getSelIndex() { alert($("#sel").get(0).selectedIndex); } function setSelIndex(index) { } function getLength() { alert($("#sel").find("option").length); } function getText() { //或者alert($("#sel").find("option:selected").html()); alert($("#sel").find("option:selected").text()); } function setText(text) { $("#sel").find("option[text='"+text+"']").attr("selected", true); } function setCheck(id) { $("input[name='chk'][value="+id+"]").attr("checked", true); } function getCheck() { var chk = ""; var len = $("input[name='chk']").length; $("input[name='chk']").each(function(n) { if($(this).attr("checked")) { var doc = ""; if(n != len -1) { doc = ","; } chk = chk + $(this).val() + doc; } }); alert(chk); } function getRadio() { alert($("input[name='rad']:checked").val()); } function setRadio(id) { $("input[type='radio'][value="+id+"]").attr("checked", true); } // --></mce:script> </head> <body> <form name="form1"> <select name="sel" id="sel"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <a href="javascript:sel(2)" mce_href="javascript:sel(2)">选择2</a> <a href="javascript:clear()" mce_href="javascript:clear()">清空</a> <a href="javascript:add()" mce_href="javascript:add()">添加一项</a> <a href="javascript:remove(2)" mce_href="javascript:remove(2)">删除value为2的项</a> <a href="javascript:getLength()" mce_href="javascript:getLength()">获取长度</a> <a href="javascript:getSelIndex()" mce_href="javascript:getSelIndex()">获取选择项的索引值</a> <a href="javascript:getText()" mce_href="javascript:getText()">获取Select选择的Text</a> <a href="javascript:setText(2)" mce_href="javascript:setText(2)">设置text为2的为选中项</a> <br/> <input name="chk" value="1" type="checkbox"/><input name="chk" value="2" type="checkbox"/><input name="chk" value="3" type="checkbox"/> 全选<input id="selAll" type="checkbox"/> <a href="javascript:setCheck(2)" mce_href="javascript:setCheck(2)">设置value为2的项为选中</a> <a href="javascript:getCheck()" mce_href="javascript:getCheck()">获取所有选中项的值</a> <br/> <input name="rad" value="1" type="radio"/><input name="rad" value="2" type="radio"/><input name="rad" value="3" type="radio"/> <a href="javascript:setRadio(2)" mce_href="javascript:setRadio(2)">设置value为2的项为选中</a> <a href="javascript:getRadio()" mce_href="javascript:getRadio()">获取选中项的值</a> <br/> </form> </body> </html>

你可能感兴趣的:(JavaScript,html,jquery,function,input,stylesheet)