abstract：SELECT、checkbox、radio是很常用的表單控件，熟練掌握操作它們的方法，會加快我們的開發(fā)速度。設(shè)置單選下拉框的選中值如果option中沒有value屬性，那可以通過text設(shè)置選中項; 如果option中有value屬性，那必須通過value設(shè)置選中項。 1）option中沒有value屬性：<SELECT id="single"

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

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

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

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

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號")設(shè)置選中項無效
  $("#single").val("選擇3號");
  //通過val("3")設(shè)置選中項有效
  $("#single").val("3");
  //【方法2】
  $("#single option:eq(2)").prop("SELECTed", true);
});

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

多選下拉框默認(rèn)的選中值是“選擇1號”和“選擇3號”。如果用val()的方式設(shè)置選中值是“選擇2號”和“選擇4號”，那只有“選擇2號”和“選擇4號”會被選中；如果用prop(“SELECTed”, true)的方式設(shè)置選中值是“選擇2號”和“選擇4號”，那默認(rèn)的“選擇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);
});

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

多選框默認(rèn)的選中值是“check1”。如果用val()的方式設(shè)置選中值是“check2”和“check4”，那只有 
“check2”和“check4”會被選中；如果用prop(“SELECTed”, true)的方式設(shè)置選中值是“check2”和“check4”，那默認(rèn)的“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);
});

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

 更多關(guān)于jQuery設(shè)置和獲取SELECT、checkbox、radio的選中值方法請關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！