本周题：获取和修改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中的值，如果想修改，只能再通过文件框再选择一遍。
但是，如果想清空文件中的值，可以使用以下两种方法

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

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如何实现呢？
欢迎给小韭菜留言。