今天示範取得4種不同類型input的值+1種多選，
分別為Text、Checkbox、Radio、Select、Multiple Select，
在Text的部分昨天有介紹過了，今天就介紹其他4個吧!

    <div x-data="{ text: 'foo', checkbox: ['foo'], radio:
        'foo', select: 'foo', 'multiselect': ['foo'] }">
        
        Text:
        <span x-text="JSON.stringify(text)"></span>
        <input type="text" x-model="text">
        
        Checkbox:
        <span x-text="JSON.stringify(checkbox)"></span>
        <input type="checkbox" x-model="checkbox"
            value="foo">
        <input type="checkbox" x-model="checkbox"
            value="bar">
            
        Radio:
        <span x-text="JSON.stringify(radio)"></span>
        <input type="radio" x-model="radio" value="foo">
        <input type="radio" x-model="radio" value="bar">
        
        Select:
        <span x-text="JSON.stringify(select)"></span>
        <select x-model="select">
            <option>foo</option>
            <option>bar</option>
        </select>
        
        Multiple Select:
        <span x-text="JSON.stringify(multiselect)"></span>
        <select x-model="multiselect" multiple>
            <option>foo</option>
            <option>bar</option>
        </select>
        
    </div>

首先外層div照慣例放上x-data，設定個預設值，讓我們來重新排版看清楚來吧。
x-data="{ text: 'foo', checkbox: ['foo'], radio:'foo', select:'foo', 'multiselect': ['foo'] }
這樣應該是挺清楚了~

Checkbox

Checkbox:
    <span x-text="JSON.stringify(checkbox)"></span>
    <input type="checkbox" x-model="checkbox" value="foo">
    <input type="checkbox" x-model="checkbox" value="bar">

x-text="JSON.stringify(checkbox)這部分是將括弧內的東西轉為字串，
再將文字印到此容器內，昨天的文章有提到這就不多說了。
範例中有兩個checkbox，value分別為foo與bar，
將兩個x-model取為同樣名稱就會被歸為同類了喔。
(記得x-model裡面的文字同時也是聯動x-data的喔)

Radio

Radio:
    <span x-text="JSON.stringify(radio)"></span>
    <input type="radio" x-model="radio" value="foo">
    <input type="radio" x-model="radio" value="bar">

可以看出看Checkbox幾乎是完全一樣，
最大的差別在於是否可以複選，
如果可以，就選Checkbox；不行，就選Radio喔!

Select

Select:
    <span x-text="JSON.stringify(select)"></span>
    <select x-model="select">
        <option>foo</option>
        <option>bar</option>
    </select>

select本身語法就不會有input標籤，
所以比較特別一點，
唯一要注意的是x-model是下在select標籤裡面喔!

Multiple Select

Multiple Select:
<span x-text="JSON.stringify(multiselect)"></span>
<select x-model="multiselect" multiple>
    <option>foo</option>
    <option>bar</option>
</select>

用法跟Select幾乎完全一樣，
只差在select標籤裡多加了multiple屬性，
那麼在選擇時可多選，而列印出來時會以陣列方式印出(預設原先就為陣列)。

所以說這些取值方式不會難，而且還挺活用的呢!