这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
Jquery 操作 radio,checkbox,select 表单操作实现代码,需要用 jquery 操作表单的朋友可以参考下。
一 、SelectjQuery 获取 Select 选择的 Text 和 Value: 1. $("#select_id").change(function(){//code...}); // 为 Select 添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); // 获取 Select 选择的 Text 3. var checkValue=$("#select_id").val(); // 获取 Select 选择的 Value 4. var checkIndex=$("#select_id").get(0).selectedIndex; // 获取 Select 选择的索引值 5. var maxIndex=$("#select_id option:last").attr("index"); // 获取 Select 最大的索引值 jQuery 设置 Select 选择的 Text 和 Value: 1. $("#select_id").get(0).selectedIndex=1; // 设置 Select 索引值为 1 的项选中 2. $("#select_id").val(4); // 设置 Select 的 Value 值为 4 的项选中 3. $("#select_id option[text='jQuery']").attr("selected", true); // 设置 Select 的 Text 值为 jQuery 的项选中 jQuery 添加 / 删除 Select 的 Option 项: 1. $("#select_id").append(""); // 为 Select 追加一个 Option(下拉项) 2. $("#select_id").prepend(" "); // 为 Select 插入一个 Option(第一个位置) 3. $("#select_id option:last").remove(); // 删除 Select 中索引值最大 Option(最后一个) 4. $("#select_id option[index='0']").remove(); // 删除 Select 中索引值为 0 的 Option(第一个) 5. $("#select_id option[value='3']").remove(); // 删除 Select 中 Value='3'的 Option 6. $("#select_id option[text='4']").remove(); // 删除 Select 中 Text='4'的 Option 7. $("#SelectID").remove(); // 删除所有项 二、Checkbox 全选 / 取消 jQuery.attr 获取 / 设置对象的属性值, 如: $("input[name='chk_list']").attr("checked"); // 读取所有 name 为'chk_list'对象的状态(是否选中) $("input[name='chk_list']").attr("checked",true); // 设置所有 name 为'chk_list'对象的 checked 为 true $("#img_1").attr("src","test.jpg"); // 设置 ID 为 img_1 的src 的值为'test.jpg' $("#img_1").attr("src"); // 读取 ID 为 img_1 的src 值 下面的代码是获取上面实例中选中的 checkbox 的 value 值: var arrChk=$("input[name='chk_list'][checked]"); $(arrChk).each(function(){window.alert(this.value); }); }); 1, 获取 checkbox 的 value $("#checkboxID").value 或 $("input[type='checkbox']").eq(n).attr("checked").value 2, 设置选中项 $("input[type='checkbox']").eq(1).attr("checked")// 设置第一个 checkbox 为选中的项 3, 删除所有 checkbox $("input[type='checkbox']").remove() 4,checkbox 方法 $(document).ready(function() {var check = $("input[type='checkbox']"); check.each(function(n) {check.eq(n).bind("click", function() {if (check.eq(n).attr("checked") != false) {var value = check.eq(n).val(); alert(value); } else {alert(check.eq(n).attr("checked")); } }) }); }); 三、radio1, 获取选中的 value 值 $("input[type='radio']:checked").val(); 2, 设置指定的项为当前选中项 $("input[type='radio']").eq(1).attr("checked", true);// 设置第二项为选中项 $("input[type='radio'][value='值']").attr("checked, true"); 3, 解决多个 Radio $("input[type='radio'][@name='rdoTest2']").eq(0).attr("checked", true); 学习笔记,以备后用。运行以后,请刷新下才能看到效果,保存到本地运行,没有任何问题。
[Ctrl+A 全选 注:
- <!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=gb2312" />
- <title>
- Jquery操作radio,checkbox,select
- </title>
- <script src="http://img.jb51.net/jslib/jquery/jquery14.js">
- </script>
- </head>
- <body>
- <script type="text/javascript">
- $(function() {
- $('#uname').blur(function() {
- if ($('#uname').val() == '') {
- $('#err').html('*');
- } else {
- $('#err').html('');
- }
- });
- $('#see').click(function() {
- if ($('#uname').val() == '') {
- $('#err').html('*');
- } else {
- $('#err').html('');
- $('#name').html($('#uname').val());
- }
- //$('#xingbie').html($(':radio:checked').val());
- $('#xingbie').html($("[name='aa']:checked").val());
- var str = "";
- $("[name='bbb']:checked").each(function() {
- str += $(this).val() + " ";
- });
- $('#shengfen').html(str);
- //$('#nianfen').html($('#nf').find('option:selected').text());//text
- $('#nianfen').html($('#nf').find('option:selected').val()); //value
- });
- $('#quan').click(function() {
- $("[name='ccc']").attr('checked', 'true');
- });
- $('#buxuan').click(function() {
- $("[name='ccc']").removeAttr('checked');
- });
- $('#fan').click(function() {
- $("[name='ccc']").each(function() {
- if ($(this).attr("checked")) {
- $(this).removeAttr("checked");
- } else {
- $(this).attr("checked", 'true');
- }
- });
- });
- $('#kan').click(function() {
- var ss = "";
- $("[name='ccc']:checked").each(function() {
- ss += $(this).val() + " ";
- });
- $('#seee').html(ss);
- });
- });
- </script>
- <table width="300" border="1" cellspacing="1" cellpadding="1">
- <tr>
- <td width="30%" align="center">
- 用户名:
- </td>
- <td width="60%">
- <input type="text" id="uname" />
- </td>
- <td width="10%">
- <div>
- </div>
- </td>
- </tr>
- <tr>
- <td align="center">
- 性 别:
- </td>
- <td>
- <input name="aa" type="radio" id="ta1" value="男" checked="checked" />
- 男
- <input name="aa" type="radio" id="ta2" value="女" />
- 女
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 省 份:
- </td>
- <td>
- <input name="bbb" type="checkbox" id="ck1" value="北京" />
- 北京
- <input name="bbb" type="checkbox" id="ck2" value="上海" />
- 上海
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 年 份:
- </td>
- <td>
- <select id="nf">
- <option value="2008">
- 2008年
- </option>
- <option value="2009">
- 2009年
- </option>
- <option value="2010">
- 2010年
- </option>
- </select>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 输出姓名
- </td>
- <td>
- <div>
- </div>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 输出性别
- </td>
- <td>
- <div>
- </div>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 输出省份
- </td>
- <td>
- <div>
- </div>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 输出年份
- </td>
- <td>
- <div>
- </div>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 结 果:
- </td>
- <td>
- <input type="button" id="see" value="输出结果" />
- </td>
- <td>
- </td>
- </tr>
- </table>
- <table width="300" border="1" cellspacing="1" cellpadding="1">
- <tr>
- <td align="center">
- 省 份:
- </td>
- <td>
- <input name="ccc" type="checkbox" id="cck1" value="北京" />
- 北京
- <input name="ccc" type="checkbox" id="cck2" value="上海" />
- 上海
- <input name="ccc" type="checkbox" id="cck3" value="广州" />
- 广州
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- </td>
- <td>
- <input name="ccc" type="checkbox" id="cck4" value="天津" />
- 天津
- <input name="ccc" type="checkbox" id="cck5" value="其他" />
- 其他
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 输 出:
- </td>
- <td>
- <div>
- </div>
- </td>
- <td>
- </td>
- </tr>
- <tr>
- <td align="center">
- 结 果:
- </td>
- <td>
- <input type="button" id="quan" value="全选" />
- <input type="button" id="buxuan" value="不选" />
- <input type="button" id="fan" value="反选" />
- <input type="button" id="kan" value="查看" />
- </td>
- <td>
- </td>
- </tr>
- </table>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0502/285034.html