本週題：獲取和修改input（text、file、adio、checkbox、select）的值

前言

這個題乍一看，簡單，再看，仍是簡單，仔細一看，是否是得查一下了。

反正小韭菜是每次用到都須要去查一番。

今天我來分框架給你們說一番。

Jquery

獲取元素: 基本上有兩種獲取方式

• 以冒號開始
  :text、 :file、 :radio、 :checkbox、
• 前面加使用type:
  input[type=text]、 input[type=file]、 input[type=radio]、 input[type=checkbox]、

獲取值: 通常是使用val()

text

文本框怕是這裏最簡單的也是最經典的一個了。
獲取：

• $(":text").val()
• $("input[type=text]").val()

修改：

• $(":text").val("changed")
• $("input[type=text]").val("changed")

這裏咱們假設頁面中只有一個text文件框，若是頁面中有多個，可使用eq或者添加類名來定位到具體的某個文本框

radio

radio(單選按鈕)，通常咱們會想要獲取到選中了哪一個值。
選中的單獨按鈕項表示checked值爲非false值,即任意一個不爲false的值。

radio一樣也是有兩種方法。

但，radio自己是一個數組的，若是想要獲取或修改單獨的值，須要使用eq或者設置具體類名.
獲取：

• $(":radio :checked").val()
• $("input[type='radio']:checked").val()

注：radio與checked沒有空格
修改：

• $(":radio").eq(0).attr('checked','checked');
• $("input[type='radio']").eq(1).attr('checked','checked')

單選按鈕，選中的話就要設置checked屬性爲checked或者爲true

checkbox

checkbox與radio是同樣的，選中的值checked值爲true。
可是，不一樣的是，checkbox是多選，選中的值是一個數組，若是都要獲取選中的全部值，須要對選項進行遍歷。

獲取：

• $(":checkbox:checked").val()
• $("input[type='checkbox']:checked").val()

//獲取全部選中的值
    var arr = [];
    $('input[type=checkbox]:checked').each(function(i) {
        console.log($(this).val())
        arr.push($(this).val())
    })

修改：

• $(":checkbox").eq(0).attr('checked','checked');
• $("input[type='checkbox']").eq(1).attr('checked','checked')

select

select下拉列表框，這裏就有些不一樣了，由於它選中的項使用的:selected
並且，它並不能使用type,它的獲取方法有些豐富了，其實總體來講，就是獲取select，或者selected選中的值

獲取：

• $("select").val();
• $(":selected").val();
• $("select :selected).val();
• $("select options:selected").val()

注：這裏select 與:selected之間就要有空格了

修改：

• $("select").val("changed");
• $(":selected").val("changed");
• $("select :selected).val("changed");
• $("select options:selected").val("changed")

固然,設置select須要設置下拉列表中已經存在的值，若是設置一個列表中沒有值，會顯示空。

file

file與text差很少，兩種最基礎的方法

獲取：

• console.log($("input[type=file]").val())
• console.log($(":file").val())

修改：
改是不可能改的。
不能修改file中的值，若是想修改，只能再經過文件框再選擇一遍。

JQuery測試連接

以上介紹的方法，小韭菜都作了測試，供你們參考
jquery測試連接 傳送門

Vue

Vue中就有一丟丟簡單粗暴，沒有jquery那麼多的分類，在這些表單控件中，通通一個東西v-model搞定。

在vue中，不論是text、checkbox、radio、select，沒有了:checked與:selected的區別，所有都用v-model對數據進行綁定。可是在vue中，它們幾個有了事件的區分。

text

用起來是真的簡單方便，直接上代碼吧
template
<input type="text" v-model="message" @input="textChange"/>

JS

data(){
    return {
      message:'abc'
    }
  },
  methods:{
    textChange(){
           console.log(this.message)
    }
  }

咱們在data中聲明定義了message變量，使用v-model將message變量與text文本進行綁定。
這樣，咱們想要獲取或者修改文本框的值時，均可以直接操做message.

text的事件是input,當你輸入時，message值會實時變化。

radio

template

<input type="radio" value="男" v-model="sex" name="sex" @change="sexChange"/> 
<input type="radio" value="女" v-model="sex" name="sex" @change="sexChange"/>

JS

data(){
    return {
      sex:''
    }
  },
  methods:{
    sexChange(){
           console.log(this.sex)
    }
  }

與text同理，不一樣的是，由於radio有不少的選項，要每個選項中都有v-model，而且進行@change事件綁定。
radio的事件是change

checkbox

template

<input type="checkbox" name="check" value="足球" v-model="check" @change="checkChange"/>
<input type="checkbox" name="check" value="籃球" v-model="check" @change="checkChange"/>
<input type="checkbox" name="check" value="電影" v-model="check" @change="checkChange"/>
<input type="checkbox" name="check" value="閱讀" v-model="check" @change="checkChange"/>

JS

data(){
    return {
      check:[],//重點
    }
  },
  methods:{
    checkChange(){
       console.log(this.check)
    }
  }

這裏，data中定義check變量時，最好定義一個數組，由於多選框的值不是一個，設置成數組後，vue會自動根據用戶選擇的值對這個數組進行增長刪除。
若是設置其它的值，好比字符串，會出現同時選中，同時消失的狀況。
checkbox的事件也是change

select

template

<select name="sele" id="sele" v-model="addre" @change="addreChange">
  <option value="北京">北京</option>
  <option value="河北">河北</option>
  <option value="河南">河南</option>
</select>

JS

data(){
    return {
      addre:'',
    }
  },
  methods:{
   addreChange(){
        console.log(this.addre)
    }
  }

select的用法能夠說與radio是同樣的了。
select的事件也是change

file

一樣是v-model
template

<input type="file" v-model="file" @change="fileChange"/>

JS

data(){
    return {
      file:'',
    }
  },
  methods:{
   fileChange(){
        console.log(this.file)
    }
  }

Vue測試連接

Vue測試連接

思考

有了JQuery 與Vue的獲取表單控件的方法，那React與Angular如何實現呢？歡迎給小韭菜留言。