javascript - JavaScript中获取字段值的方法(兼容所有输入类型)

Question

仅知道字段名称就可以通过与文本、文本区域和单选按钮兼容的方式获取值。

使用 native JavaScript 或 jQuery 库

我可以使用 $("input[name='field1']").val() 但它不适用于单选按钮，或者我可以使用 $("input [name='field1']:checked").val() 但它仅适用于单选按钮。我知道我可以添加尝试确定字段类型的逻辑，但随着您容纳更多类型的字段，逻辑开始变得复杂。

下面是我正在尝试做的事情的更具体示例:

<form>
    <label><input type="radio" name="field1" value="a" /> a</label>
    <label><input type="radio" name="field1" value="b" /> b</label>
    <input type="text" name="field2" />
    <button type="button">Test</button>
</form>

<script>
    getFieldValue = function(name1) {
        return $("input[name='" + name1 + "']").val(); //doesn't work with radio buttons
    }
    $('button').click( function() {
        alert(getFieldValue('field1'));
    });
</script>

2017 年 5 月 26 日更新最终使用 jQuery serializeArray 函数。下面是我的代码，以防有人好奇( https://jsfiddle.net/t6p8sqLu/2/ )

var formdata = $("form").serializeArray();
function getFieldValue(name) {
    var result = [];
    for (var x in formdata) {
        if (formdata[x].name === name) {
            result.push(formdata[x].value);
        }
    }
    return result;
}

Answer 1

如果您使用带有名称的表单并且所有输入字段都带有name，那么您可能需要使用jQuery('form[name="xyz "]').serializeArray().

Jquery Serialize Array

Jquery Serialize //总是返回字符串

或者您始终可以使用 jquery 伪选择器

$(":input").each(function() {
  if ($(this).attr('type') === 'radio' && !$(this).prop('checked')) {
    return;
  }
  console.log($(this).attr('name'), $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  input text:
  <input type="text" name="name1" value="Name" /><br/>
  Checkbox
  <input type="checkbox" name="check1" value="yes" checked /> Yes
  <input type="checkbox" name="check1" value="all" checked /> Yes to all<br/>
  Radio
  <input type="radio" name="radio1" value="yes" checked />
  <input type="radio" name="radio1" value="no" /><br/>
  Textarea
  <textarea name="textarea">Textarea</textarea><br/>
  Select
  <select name="select1">
    <option value="dummy" selected>Dummy</option>
  </select>
</form>