JavaScript与jQuery操作常用的输入元素

以下代码的测试环境为：jQuery-2.1.4，IE 11，FireFox 40。

1. text

• 取值与赋值

  /*   原生JS   */
  var txtInput = document.getElementById("txtInput");
  var value = txtInput.value;
  txtInput.value = "new value";
  
  /*   jQuery   */
  var $txtInput = $("#txtInput");
  var value = $txtInput.val();
  $txtInput.val("new value");

2. checkbox

• 是否选中

  /*   原生JS   */
  var chkInput = document.getElementById("chkInput");
  var isChecked = chkInput.checked; //返回boolean
  
  /*   jQuery   */
  var $chkInput = $("#chkInput");
  //attr只能获取checkbox初始化时是否选中，选中为"checked"，否则为undefined
  var isChecked = $chkInput.attr("checked");
  //下面两种方法都能动态获取checkbox是否选中，返回boolean
  isChecked = $chkInput.is(":checked");
  isChecked = $chkInput.prop("checked");

• 选中/取消选中

  /*   原生JS   */
  var chkInput = document.getElementById("chkInput");
  chkInput.checked = true;
  
  /*   jQuery   */
  var $chkInput = $("#chkInput");
  $chkInput.attr("checked", true);
  $chkInput.prop("checked", true);

3. radio

• 选中/取消选中

  /*   原生JS   */
  document.getElementById("radio1").checked = true;
  
  /*   jQuery   */
  $("#radio1").attr("checked", true);

• 获取选中项的值

  /*   原生JS   */
  var radioInputs = document.getElementsByName("radio");
  var value;
  for (var i = 0; i < radioInputs.length; i++) {
      if (radioInputs[i].checked) {
          value = radioInputs[i].value;
      }
  }
  
  /*   jQuery   */
  var $checkedRadio = $("input:radio[name=radio]:checked");
  var value = $checkedRadio.val();

4. select

• 获取选中的值与文本

  /*   原生JS   */
  var selInput = document.getElementById("selInput");
  var val = selInput.value;
  var text = selInput.options[selInput.selectedIndex].text;
  
  
  /*   jQuery   */
  var $selInput = $("#selInput");
  var val = $selInput.val();
  var text = $("#selInput option:selected").text();

• 通过选项值或者选项文本设置选中/取消选中

  /*   原生JS   */
  var selInput = document.getElementById("selInput");
  //选中值为test的选项
  selInput.value = "test";
  //选中显示文本为test的选项
  for (var i = 0; i < selInput.options.length; i++) {
      //text为选项的显示文本，value为选项的值
      if (selInput.options[i].text === "test") {
          selInput.options[i].selected = true;
          break;
      }
  }
  
  /*   jQuery   */
  //选中值为test的选项
  $("#selInput").val("test");
  //选中显示文本为test的选项
  $("#selInput option").filter(function () {
      return $(this).text() === "test";
  }).attr("selected", true);

• 新增/删除选项
  

  /*   原生JS   */
  //新增
  var selOptions = document.getElementById("selInput").options;
  var newOption = new Option("testText", "testValue");
  selOptions.add(newOption);
  //删除
  for(var i = 0; i < selOptions.length; i++) {
      if(selOptions[i].text === "test") {
          selOptions.remove(i);
          break;
      }
  }
  
  /*   jQuery   */
  //新增
  var $newOption = $("<option value='testValue'>testText</option>");
  $("#selInput").append($newOption);
  //删除
  $("#selInput option").filter(function() {
      return $(this).text() === "test";
  }).remove();

• 清空选项
  

  /*   原生JS   */
  document.getElementById("selInput").options.length = 0;
  
  /*   jQuery   */
  $("#selInput").empty();