jQuery操作Form表單元素

Web開發中經常需要操作表單，form表單元素有select、checkbox、radio、textarea、button、file、text、hidden、password等。其中checkbox和radio的讀寫值操作比較多變，checkbox和radio經常用在一個分組裏，實現多選或者單選。jQuery提供了利用表單選擇器我們可以極其方便地獲取表單的某個或某類型的元素。

選擇器	返回	示例
:input	集合元素	$(“:input”)選取所有,,和元素。
:text	單行文本框集合	$(“:text”)選取所有的單行文本框。
:password	密碼框集合	$(“:password”)選取所有的密碼框。
:radio	單行文本框集合	$(“:radio”)選取所有的單選框。
:checkbox	複選框集合	$(“:checkbox”)選取所有的複選框。
:submit	提交按鈕集合	$(“:submit”)選取所有的提交按鈕。
:image	圖片按鈕集合	$(“:image”)選取所有的圖片按鈕。
:reset	重置按鈕集合	$(“:reset”)選取所有的重置按鈕。
:button	按鈕集合	$(“:button”)選取所有的按鈕。
:file	上傳域集合	$(“:file”)選取所有的上傳域。
:hidden	不可見元素集合	$(“:hidden”)選取所有的不可見元素。

下面介紹select、checkbox和radio的用法。

select

select元素內容如下

<select id="select">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">武漢</option>
    <option value="3">南京</option>
    <option value="4">廣州</option>
    <option value="5" selected="selected">深圳</option>
</select>

對select的操作

//獲取select當前選中項的值
$('#select').val();

//獲取select當前選中項的文本
$('#select').children('option:selected').text();

//設置select選中值爲3的option
$('#select').val('3');

//設置select選中文本爲武漢的option
$('#select').children('option:contains(武漢)').attr('selected', 'selected');

checkbox

<div>
    <fieldset id="checkboxGroup">
        <legend>選擇最喜歡的城市</legend>
        <div><input type="checkbox" name="city" value="北京" /><span>北京</span></div>
        <div><input type="checkbox" name="city" value="上海" /><span>上海</span></div>
        <div><input type="checkbox" name="city" value="南京" /><span>南京</span></div>
        <div><input type="checkbox" name="city" value="深圳" /><span>深圳</span></div>
        <div><input type="checkbox" name="city" value="廣州" /><span>廣州</span></div>
        <div><input type="checkbox" name="city" value="武漢" /><span>武漢</span></div>
    </fieldset>
</div>
<div style="margin-top:20px;">
    <button id="btnCheckbox1">獲取選擇的checkbox</button>
    <button id="btnCheckbox2">選擇深圳和廣州</button>
    <button id="btnCheckbox3">全選</button>
    <button id="btnCheckbox4">全不選</button>
    <button id="btnCheckbox5">反選</button>
</div>

//獲取選擇的checkbox值
$('#btnCheckbox1').click(function(){
    var values = [];
    $('#checkboxGroup').find(':checkbox:checked').each(function(){
        values.push($(this).val());
    });

    alert(values.join(','));
});

//選擇深圳和廣州
$('#btnCheckbox2').click(function(){
    var $group = $('#checkboxGroup');

    $group.find(':checkbox').each(function(){
        var $this = $(this), val = $this.val();
        if(val === '深圳' || val === '廣州'){
            $this.prop('checked', true);
        }else{
            $this.prop('checked', false);
        }
    });
});

//全選
$('#btnCheckbox3').click(function(){
    var $group = $('#checkboxGroup');
    $group.find(':checkbox').prop('checked', true);
});

//全不選
$('#btnCheckbox4').click(function(){
    var $group = $('#checkboxGroup');
    $group.find(':checkbox').prop('checked', false);
});

//反選
$('#btnCheckbox5').click(function(){
    var $group = $('#checkboxGroup');
    $group.find(':checkbox').each(function(){
        var $this = $(this);
        $this.prop('checked', !$this.prop('checked'));
    });
});

radio

<div>
    <fieldset id="radioGroup">
        <legend>選擇最喜歡的城市</legend>
        <div><input type="radio" name="city" value="北京" /><span>北京</span></div>
        <div><input type="radio" name="city" value="上海" /><span>上海</span></div>
        <div><input type="radio" name="city" value="南京" /><span>南京</span></div>
        <div><input type="radio" name="city" value="深圳" /><span>深圳</span></div>
        <div><input type="radio" name="city" value="廣州" /><span>廣州</span></div>
        <div><input type="radio" name="city" value="武漢" /><span>武漢</span></div>
    </fieldset>
</div>
<div style="margin-top:20px;">
    <button id="btnRadio1">獲取選擇的radio</button>
    <button id="btnRadio2">選擇上海</button>
</div>

//獲取當前選擇的radio值
$('#btnRadio1').click(function(){
    var group = $('#radioGroup'),
        value = group.find(':radio:checked').val();
    alert(value);
});

//選擇上海
$('#btnRadio2').click(function(){
    $('#radioGroup').find(':radio[value="上海"]').prop('checked', true);
});

form

jQuery提供了serialize()和serializeArray()獲取form表單元素的值，serialize()把獲取的值拼接成字符串，serializeArray()返回數組。

<form id="form">
    <div>姓名：<input type="text" name="name" /></div>
    <div>年齡：<input type="text" name="age" /></div>
    <div>
        性別：
        <select name="sex">
            <option value="男">男</option>
            <option value="女">女</option>
            <option value="保密" selected="selected">保密</option>
        </select>
    </div>
    <fieldset>
        <legend>最喜歡的城市</legend>
        <div><input type="radio" name="city" value="廣州" /><span>廣州</span></div>
        <div><input type="radio" name="city" value="深圳" /><span>深圳</span></div>
        <div><input type="radio" name="city" value="上海" checked="checked" /><span>上海</span></div>
    </fieldset>
    <fieldset>
        <legend>喜歡的運動</legend>
        <div><input type="checkbox" name="sports" value="足球" /><span>足球</span></div>
        <div><input type="checkbox" name="sports" value="籃球" /><span>籃球</span></div>
        <div><input type="checkbox" name="sports" value="羽毛球" /><span>羽毛球</span></div>
        <div><input type="checkbox" name="sports" value="乒乓球" /><span>乒乓球</span></div>
    </fieldset>     
</form>
<div style="margin-top:20px;">
    <button id="btnSubmit">提交</button>
    <button id="btnReset">重置</button>
    <button id="btnFormValue">獲取form的值</button>
</div>

//提交
$('#btnSubmit').click(function(){
    $('#form').submit();
});

//重置
$('#btnReset').click(function(){
    //由於jQuery沒有提供reset方法，只能用form原生的reset方法。
    $('#form').get(0).reset();
});

//獲取form的值
$('#btnFormValue').click(function(){
    alert(decodeURIComponent($('#form').serialize()));
});