JQuery笔记(六)-Form

来源：互联网发布：nce新概念英语软件编辑：程序博客网时间：2024/04/29 04:34

在B/S系统中，大家打交道最多的就是页面中的Form表单，JQuery中对此也提供了丰富的函数，简化操作

1.启用和禁用控件

$('#billingInfo input:text').attr('disabled','disabled');

$('#billingInfo input:text').removeAttr('disabled');

2.选中radio或checkbox

$radioBtn.attr('checked',true);

3.CheckBox的全选

   function check(){
           $(":checkbox").attr("checked","checked");
           $(this).text("UnCheck");
   }
   function unCheck(){
           $(":checkbox").removeAttr("checked");
           $(this).text("Check");
   }

$("#clickMe").toggle(check,unCheck);

<a href="#" id="clickMe">Check</a>

4.Select中的option的添加和删除

实际开发中，经常会遇到将一个列表框中的项转移到另一个列表框

     <fieldset id="selectGroup" class="area">
            <legend>SelectGroup</legend>
            <div>
            <table>
                <tr>
                    <td>
                        <select id="selectOne" multiple="multiple">
                            <option value="One">One</option>
                            <option value="Two">Two</option>
                        </select>
                    </td>
                    <td>
                        <a href="#" id="addOption">-></a><br>
                        <a href="#" id="removeOption"><-</a>
                    </td>
                    <td>
                        <select id="selectTwo" multiple="multiple">
                            <option value="Three">Three</option>
                            <option value="Four">Four</option>
                        </select>
                    </td>
                </tr>
            </table>
            </div>
        </fieldset>

       function addOption(event){
                $options = $("#selectOne option:selected");
                $options.appendTo("#selectTwo");
       }
       function removeOption(event){
                var $options = $("#selectTwo option:selected");
                $options.appendTo("#selectOne");
       }

$("#addOption").bind("click",addOption);
$("#removeOption").bind("click",removeOption);

5.表单验证

JQuery中提供了一个强大的插件用来验证表单控件，详见官网

6.Form的Ajax提交

其实，这个部分写到这里就没办法写了，太多的知识点，我又不想做抄书机器。还是请大家翻阅文档吧，呵呵。