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

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

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

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

設(shè)置單選下拉框的選中值

如果option中沒(méi)有value屬性，那可以通過(guò)text設(shè)置選中項(xiàng);

如果option中有value屬性，那必須通過(guò)value設(shè)置選中項(xiàng)。

1）option中沒(méi)有value屬性：

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

2）option中有value屬性：

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

設(shè)置多選下拉框的選中值

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

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

設(shè)置多選框的選中值

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

<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);
});

設(shè)置單選框的選中值

設(shè)置單選框的選中值不能用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);
});

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: