Jquery获得控件值的三种方法总结

在Jquery中，获取控件值有多种方法，常用以下三种：

方法一：通过选择器获取控件的值

使用Jquery选择器获取控件元素，再使用Jquery提供的方法获取控件的值。

示例一：获取文本框的值

<!--html代码-->
<input type="text" id="txtName" value="Jack">
<button id="btnGet">获取值</button>

<!--js代码-->
<script>
$("#btnGet").click(function(){
  var name = $("#txtName").val();  //通过id选择器获取文本框元素，并获取其值
  alert(name);  //输出文本框的值
});
</script>

示例二：获取下拉列表选项的值

<!--html代码-->
<select id="selFruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>
<button id="btnGet">获取值</button>

<!--js代码-->
<script>
$("#btnGet").click(function(){
  var fruit = $("#selFruit").val();  //通过id选择器获取下拉列表元素，并获取选中项的值
  alert(fruit);  //输出选中项的值
});
</script>

方法二：通过文档对象获取控件的值

将控件元素直接传入Jquery对象中，再获取控件的值。

示例三：获取复选框的值

<!--html代码-->
<input type="checkbox" id="chkMonday" value="Monday" checked>星期一
<input type="checkbox" id="chkTuesday" value="Tuesday" checked>星期二
<button id="btnGet">获取值</button>

<!--js代码-->
<script>
$("#btnGet").click(function(){
  var monday = $("#chkMonday")[0].checked;  //将复选框元素数组中的第一个元素取出，并获取其选中状态
  var tuesday = $("#chkTuesday").get(0).checked;  //通过get方法获取复选框元素数组中的第一个元素，并获取其选中状态
  alert("星期一："+monday+"\n星期二："+tuesday);  //输出星期一和星期二的选中状态
});
</script>

方法三：通过表单序列化获取控件的值

将表单元素序列化为字符串，再通过split方法将字符串转化为数组，获取控件的值。

示例四：获取表单元素的值

<!--html代码-->
<form id="registerForm">
  <label for="txtName">姓名：</label>
  <input type="text" id="txtName" name="name" value="Jack"><br>

  <label for="selGender">性别：</label>
  <select id="selGender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select><br>

  <input type="checkbox" id="chkReading" name="hobby" value="reading" checked>阅读
  <input type="checkbox" id="chkCycling" name="hobby" value="cycling">骑车
</form>
<button id="btnGet">获取值</button>

<!--js代码-->
<script>
$("#btnGet").click(function(){
  var formData = $("#registerForm").serialize();  //序列化表单元素为字符串
  var dataArray = formData.split("&");  //将字符串分割为数组
  var name = dataArray[0].split("=")[1];  //获取姓名的值
  var gender = dataArray[1].split("=")[1];  //获取性别的值
  var hobby = dataArray[2].split("=")[1];  //获取爱好的值，因为有两个复选框，所以此处只能获取到其中一个的值
  alert("姓名："+name+"\n性别："+gender+"\n爱好："+hobby);  //输出姓名、性别和爱好的值
});
</script>

以上就是Jquery获取控件值的三种方法，并且通过示例进行了详细的说明。