jQuery設置和獲取select、checkbox、radio的選中值方法

更新時間：2017年01月01日 14:00:34 作者：xiaouncle

select、checkbox、radio是很常用的表單控件，這篇文章主要介紹了jQuery設置和獲取select、checkbox、radio的選中值方法,有興趣的可以了解一下。

select、checkbox、radio是很常用的表單控件，熟練掌握操作它們的方法，會加快我們的開發(fā)速度。

設置單選下拉框的選中值

如果option中沒有value屬性，那可以通過text設置選中項;

如果option中有value屬性，那必須通過value設置選中項。

1）option中沒有value屬性：

<select id="single">
  <option>選擇1號</option>
  <option>選擇2號</option>
  <option>選擇3號</option>
</select>
$("#btn1").click(function() {
  //【方法1】
  $("#single").val("選擇3號");
  //【方法2】
  $("#single").val(["選擇3號"]);
  //【方法3】
  $("#single option:eq(2)").prop("selected", true);
});

2）option中有value屬性：

<select id="single">
  <option value="1">選擇1號</option>
  <option value="2">選擇2號</option>
  <option value="3">選擇3號</option>
</select>
$("#btn1").click(function() {
  //【方法1】
  //通過val("選擇3號")設置選中項無效
  $("#single").val("選擇3號");
  //通過val("3")設置選中項有效
  $("#single").val("3");
  //【方法2】
  $("#single option:eq(2)").prop("selected", true);
});

設置多選下拉框的選中值

多選下拉框默認的選中值是“選擇1號”和“選擇3號”。如果用val()的方式設置選中值是“選擇2號”和“選擇4號”，那只有“選擇2號”和“選擇4號”會被選中；如果用prop(“selected”, true)的方式設置選中值是“選擇2號”和“選擇4號”，那默認的“選擇1號”和“選擇3號”以及“選擇2號”和“選擇4號”都會被選中。

<select id="multiple" multiple="multiple">
  <option selected="selected">選擇1號</option>
  <option>選擇2號</option>
  <option selected="selected">選擇3號</option>
  <option>選擇4號</option>
  <option>選擇5號</option>
</select>
$("#btn2").click(function () {
  //【方法1】
  $("#multiple").val(["選擇2號", "選擇4號"]);
  //【方法2】
  $("#multiple option:eq(1)").prop("selected", true);
  $("#multiple option:eq(3)").prop("selected", true);
});

設置多選框的選中值

多選框默認的選中值是“check1”。如果用val()的方式設置選中值是“check2”和“check4”，那只有
“check2”和“check4”會被選中；如果用prop(“selected”, true)的方式設置選中值是“check2”和“check4”，那默認的“check1”以及“check2”和“check4”都會被選中。

<input type="checkbox" name="hobby" value="check1" checked="checked"/>多選1
<input type="checkbox" name="hobby" value="check2"/>多選2
<input type="checkbox" name="hobby" value="check3"/>多選3
<input type="checkbox" name="hobby" value="check4"/>多選4
<input type="checkbox" name="hobby" value="check5"/>多選5
$("#btn3").click(function () {
  //【方法1】
  $("input[type=checkbox][name=hobby]").val(["check2","check4"]);
  //【方法2】
  $("input[type=checkbox][name=hobby]:eq(1)").prop("checked", true);
  $("input[type=checkbox][name=hobby]:eq(3)").prop("checked", true);
});

設置單選框的選中值

設置單選框的選中值不能用val(“volleyball”)，必須用val([“volleyball”])。

<input type="radio" name="sport" value="soccer"/>足球
<input type="radio" name="sport" value="volleyball"/>排球
<input type="radio" name="sport" value="baseball"/>棒球
<input type="radio" name="sport" value="badminton"/>羽毛球
<input type="radio" name="sport" value="pingpong"/>乒乓球
$("#btn4").click(function () {
  //【方法1】
  $("input[type=radio][name=sport]").val(["volleyball"]);
  //【方法2】
  $("input[type=radio][name=sport]:eq(1)").prop("checked", true);
});

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: